Designフリーアイコン素材のダウンロードサイトと、アイコン利用時の注意点などダウンロード、その前に。ビットマップはダメアイコン素材をダウンロードする前に、注意点を。対応を考えると、実際の倍のサイズに拡大する必要があるため、ビットマップではダメ。拡大で劣化しないことがポイント。Photoshopで開いてみたら、ただのビットマップだった...ってことが無いように、ダウンロード前にファイル形式は確認すること。「シェイプ」で描画されていれば全然OK。この場合、シェイプを拡大する前に「エッジを整列」をチェックするのを忘れずに。フリー素材とはいえ、他人が作ったものを利用させていただくわけだから、各サイトでライセンスを良く確認し、利用規約どおりに使うように心がけたい。iOS7こちらは、4タイプに分かれてダウンロードするかたちになっている。それぞれが30x30px、60x60pxのフォルダに分かれていて、それぞれにai、psdが用意されていて、至れり尽くせり。psdでもシェイプなので編集可能。psdファイルのみだが、アイコンはシェイプなのでOK。Photoshopの「レイヤー効果」で型押しのようなビジュアルになっている。レイヤー効果をはずして自由に加工することも可能。Dezinerfolioちょうどいいアイコンが無いときは...サイトに合うカタチが無いときは自分で作るしか無い(笑!)何十分も理想のカタチを探しまわるより、自分で作ったほうが速いって。LINEなどのWebサービスのロゴマーク)の場合は、本家本元のロゴを使用したほうが無難。ガイドライン」などのキーワードで検索すると、たいていダウンロードできるようになっている。画像の○のアイコンは自作。良いカタチが探せなかったり、ダウンロードしたアイコンのサイズを変更すると線幅のバランスが悪くなったため。Twitterアイコンは、Twitterサイトからダウンロード。Aboutその他は素材サイトからダウンロードしたものを使わせていただいた。「まとめ」サイトみなさんよくこんだけ調べたな〜と、いつも思う。まとめサイトいろいろです。VIPこちらは、「まとめサイトのまとめ」的なモノ。プレビューまでついてて、すごいです。用意したアイコンをヘッダーに横並びで配置するとき、マージンを「パーセント(%)」で指定すると、デバイスの表示領域に合わせて広がったり狭まったりするので便利。margin-left:3%」で配置している。width:24px;}アイコンの高さは揃えたが、幅がそれぞれ違うので、li要素で高さだけ指定し、各liにidをつけて、それぞれ適した幅を指定している。アイコン画像はすべて倍のサイズで作っている。jQuery、WordPressなど、Webデザイン関連をメモっていく覚え書きサイトです。Reserved.^。