四角マーク素材作成講座バージョン1：基本
ここではリストマークなどに使う四角マークの基本を作成していきます
ファイルの新規作成
すべての四角マークではこの設定での新規ファイルを使います。
上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅：20px 高さ：20px 解像度：72px カラーモード：RGBカラー カンバスカラー：透明とします。
四角形を作る
小さな四角形なら鉛筆ツールで塗りつぶしていってもできますがここでは長方形選択ツールを使い四角系を作ります、。
左メニューの中にある長方形選択ツールを選び、下の画像のように5×5ピクセルの大きさの範囲を選択します。
多少位置がずれても後で変更できますので真ん中あたりをめどに作ってください。
次に上の画像のように塗りつぶしツールを使い好きな色で塗りつぶします。
これで四角形は完成です。あとはこれをもとにアレンジなどを加えています。アレンジによっては大きさなどを変えたりする必要が出てきたりします。
影をつける
基本となる5×5ピクセルの四角形の下と右の列に黒で影をつけてみました。
これだけでも立体的になり素材に存在感が出てきます。
↓完成画像
さらに左と上の列に青の彩度を落とした色で塗りつぶしていきます。塗りつぶしたものが上の画像です。
これで立体的と見る人には認識されると思います。
影のつけかたを逆にすればまた違った感じに見えます。
↓完成画像
違うバージョン
上で作成した画像を使いさらにアレンジしていきます。
上で作成した画像の青の四角形の部分に光を当てる感じを作ります。
青の四角形の上と左に鉛筆ツールの1ピクセルで色を白にして見本の画像のように塗りつぶしていきます。
さらに薄い青の部分を黒で塗りつぶし画像をくっきりさせます。ここでは枠を黒にしていますが自分で作る際は好きな色で枠を作ってください。
ポイントは枠の色と中の色の組み合わせをどうするかということです。
実際は枠の色と中の色が一緒でも白などで光を当てている感じにすればたいていはきれいになります。
↓完成画像
ものすごく影をつけたい場合は使う色の明暗に差をつければはっきり影をだしたり、薄く影を出すなどサイトのイメージに合うように作れます。