Bookmark

ブックマーク(デザイン)

img画像にSVGfilterを適用して生成しなくても様々なフィルター効果を得ることが出来るソースコード付解説

ICS MEDIA
コピペOK！ SVGフィルターを使った画像加工の作例集 - ICS MEDIA
https://ics.media/entry/241122/
ウェブサイトに欠かせない画像コンテンツ。AdobePhotoshopなどで加工し書き出すことも多いですが、SVGフィルターを使用すると同じように複雑な効果を表現できます。本記事では、SVGフィルターを使っていろいろな雰囲気の画像加工の作例を紹介します。
様々なサービスのアイコンがSVGでまとめられているのでサービスごとに探しに行かなくて済む

svgl.app
svgl
https://svgl.app
A beautiful library with SVG logos
画像圧縮サービス　png以外にwebpやjpegの同時圧縮やWordPressプラグインも提供しており圧縮率が優秀

tinypng.com
TinyPNG – Compress WebP, PNG and JPEG images intelligently
https://tinypng.com
SVGアイコン集　Figmaプラグインもある

Phosphor Icons
Phosphor Icons
https://phosphoricons.com
A flexible icon family for interfaces, diagrams, presentations — whatever, really.
CSSだけでグリッチ効果とRGBずらし（ホラー演出などでよくあるやつ）を付与する方法 ※少々ニッチだけどhover演出などピンポイントで使えるケースがあるかも

Zenn
加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける
https://zenn.dev/ixkaito/articles/css-image-glitch
CSSグラデーションをGUIで生成するWebサービス RGBによるグラデーションでくすむ色をoklch, hsl指定できれいに補完してくれる

gradient.style
CSS HD Gradients
https://gradient.style
Wide gamut Color 4 compliant CSS gradient builder.
adobeの画像生成AI GUIで直感的に操作でき学習元の権利侵害がないためデザインの素材制作に有用

firefly.adobe.com
Adobe Firefly (Beta)
https://firefly.adobe.com
黄金比　白銀比　白金比　の比率計算サービス　白金比まで出してくれるのが珍しく、縦横比だけでなく横幅に応じた比率を算出してくれる

KISHIN 貴真
METALLIC RATIO ／貴金属比 [黄金比・白銀比などを計算]
https://voidism.net/metallicratio/
黄金比や白銀比を計算するWebアプリ。このツールは、基準となる数値をひとつ指定するだけで、黄金比や白銀比に代表される各貴金属比を簡単に算出できるものです。数値だけではなく視覚的にも比率を確認できるので、求めている比率を直感的に得ることができます。デザイン作業などで美しい比率が必要な時にご利用ください。
UIパーツ集　ボリュームもあり、ソースコードも公開されていてアイデアの源泉になる

uiverse.io
Universe of UI elements made with HTML & CSS
~~https://uiverse.io~~
Library of free and customizable HTML and CSS UI elements. It's all open-source, and it's all free. Try it out to save you many hours spent on building & customizing UI components for your next project.
UIデザインのための心理学：33の法則・原則（実例つき）※主に管理画面、入力インターフェイス

knowledge / baigie
UIデザインのための心理学：33の法則・原則（実例つき） | knowledge / baigie
https://baigie.me/officialblog/2022/03/29/psychology_for_uidesign/