グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

WEB制作に役立つデザインアーカイブサイトは数多くありますが、
その中でも見出しやメニューなどの「パーツ」ごとにまとめられているサイトです。

デザインしていると細かいあしらいで悩むことが結構あるので、
1つ1つサイトを見て回らなくてすむのはありがたいですね。


■Webデザインの"ブブン"を集めたブブンデザインアーカイブ


http://bubundesignarchive.jp/

メインビジュアル、見出しなど部分ごとにアーカイブされています。
かなりの数があります。


■見出しデザイン.com -Webデザインの"見出し"を集めたサイト-


http://midashi-design.com/

見出しのみを集めたデザインギャラリー。


■フッターデザイン.com -Webデザインの"フッター"を集めたサイト-


http://footer-design.com/

フッターのみを集めたデザインギャラリー。


■MephoBox


http://box.mepholio.com/

海外。カレンダーや404ページまであったりします。


■Elements of Design


http://www.smileycat.com/design_elements/

海外。数が多いです。


以上。

この他にも海外のサイトだと結構ありますが、
かっこよくても日本のサイトに合わなかったりして結局
使えなかったりするんですよね。

photoshopでレイアウトする際、地味に手間がかかるガイドを引く作業。
こちらのエクステンションを使えば簡単に作成できます！


GuideGuide
上下左右のマージンに中心線など、細かく設定できて、
１クリックでガイドが引けてしまうので、とっても便利です！

続いて、
「サイト作るときに便利なPhotoShop JSX、ショートカット、アクション」
という記事で紹介されていました。
かゆいところに手が届く、スクリプト詰め合わせです。
自作されたそうです。感謝です！

個人的には、一度書いた角丸のを数値指定で変更できる「角丸具合変更」と
複数選択したテキスト、シェイプを一度で変更できる「カラーピッカー」は、
便利ですばらしいです！

そして、
CS6からシェイプツールでドキュメントをクリックすると、ダイアログが表示され、
任意のサイズでシェイプを書く事ができるようになってました。

素材サイトなどで配布されている、モノクロ素材の色を変える方法です。



Photoshopでの手順になります。

1.「イメージ」→「モード」がRGBやCMYKになっていることを確認

2.「イメージ」→「色調補正」→「色相・彩度」を選択

3.「色彩の統一」にチェックを入れ、彩度を上げる




また、モノクロの状態でブラシに登録し、希望の描画色を選択して塗るという方法もあります。
すでに使う色が決まっているなら、数値で指定できるこちらが良いかもしれません。

Photoshopでデザインすると無数のレイヤーが生まれます。

いざ、画面上に見えているオブジェクト？（ではないですが、要するに見えている"ブツ"）がどのレイヤーなのか分かりにくいこと事もしばしば。どのレイヤーなんだー、探せないっ！というときの為に、そのブツがどのレイヤーなのかすぐに判別できる方法を教えてもらいました。備忘録的に記録。

移動ツール
↓
Macならoptionキーを押しながら、探したいブツを右クリック
↓
レイヤーパレット上でブツのレイヤーが選択されている状態になる

簡単ですが、かなり便利。

とても便利なパターン配布サイトです。
商用でもフリーで使え、クレジットも必要ありません。

WebTreats ETC（パターンアーカイブのページ）
http://webtreats.mysitemyway.com/category/photoshop-resources/patterns/

クオリティの高いものが揃っています。

ぱっと見でテクスチャーのようなものもありますが、
パターンなので繋ぎ目なく繰り返すことができます。

凝ったものが多く、なかなか使い所がない・・
ということにもなりそうですが、
リストを眺めているだけでもインスピレーションが湧きそうなのでオススメです。