こんにちは、クリエイティブフレークです。
今回はPhotoshopを使ったWebデザイン。
やってみたいけど、何から勉強したらいいのか分からない人も、ある程度基礎を学んだ人も、勉強になるのが「トレース」です。
トレースとはWikipedia先生によると「すでにある物をなぞること。」だそうです。
トレースでは、普段は何気なく使っているサイトのボタンやアイコン一つにしても、余白感だったり、影のつけ方だったり、非常に細かいところまで見えてきます。
今回のネタはサイトでもバナーでもなく、MacのFinderの中のボタンアイコンです。
▼モニターをスクリーンショットでjpg等で撮り、Photoshopで開きます
▼作るのはこの部分
▼まず背景となる角丸の長方形を作ります
色を元の画像から抽出するのに「スポイトツール」
を大活用します
▼先ほどの角丸長方形のレイヤーに、グラデーションオーバーレイと境界線を指定します。境界線は内側1pxでひきました。
▼そして、ちょこっと縦線があるようなので作ります
▼四角が4個並んでいるうちの1つを長方形ツールで作ります。レイヤー効果で境界線をつけます。よく見ると、下に白いシャドウがあるので、それも忘れずに。
▼上で作ったレイヤーたちをグループにし、グループを複製（コピー）し、合計4つの四角にします
▼これと同じ要領で、とにかく四角形ツールと直線ツールだけを使用し、残りのアイコンも描いていきます
▼オリジナルと比べてみると、ほとんど同じですよね
このトレースのコツはとにかく画像を拡大して、ピクセル単位まで見ることです。
まずは「こんなアイコンおしゃれ！」とか「このバナー素敵」と思ったもの、とにかく自分の興味のあるものを作ってみましょう。
今回はPhotoshopを使ったWebデザイン。
やってみたいけど、何から勉強したらいいのか分からない人も、ある程度基礎を学んだ人も、勉強になるのが「トレース」です。
トレースとはWikipedia先生によると「すでにある物をなぞること。」だそうです。
トレースでは、普段は何気なく使っているサイトのボタンやアイコン一つにしても、余白感だったり、影のつけ方だったり、非常に細かいところまで見えてきます。
今回のネタはサイトでもバナーでもなく、MacのFinderの中のボタンアイコンです。
▼モニターをスクリーンショットでjpg等で撮り、Photoshopで開きます
▼作るのはこの部分
▼まず背景となる角丸の長方形を作ります
色を元の画像から抽出するのに「スポイトツール」
を大活用します▼先ほどの角丸長方形のレイヤーに、グラデーションオーバーレイと境界線を指定します。境界線は内側1pxでひきました。
▼そして、ちょこっと縦線があるようなので作ります
▼四角が4個並んでいるうちの1つを長方形ツールで作ります。レイヤー効果で境界線をつけます。よく見ると、下に白いシャドウがあるので、それも忘れずに。
▼上で作ったレイヤーたちをグループにし、グループを複製（コピー）し、合計4つの四角にします
▼これと同じ要領で、とにかく四角形ツールと直線ツールだけを使用し、残りのアイコンも描いていきます
▼オリジナルと比べてみると、ほとんど同じですよね
このトレースのコツはとにかく画像を拡大して、ピクセル単位まで見ることです。
まずは「こんなアイコンおしゃれ！」とか「このバナー素敵」と思ったもの、とにかく自分の興味のあるものを作ってみましょう。
Written by Creative Flake
コメント
コメントを投稿