Webデザイン力を上げる。LOL.blog---webデザインetcを勉強中Webデザイン力を上げる。Illustrator,memo,webWebデザイン力を上げる。Webトレースをやってみよう!-手順編-TweetPocket今回は、前回の記事「Webデザイン力を上げる。Webトレースをやってみよう!-メリット編-」の続きです!私がよくやるトレースの手順について紹介します(^^)ちなみに私はIllustratorを使いますが、もちろんPhotoshopでも大丈夫です!トレースの流れ今回の記事の流れです。実際に私もトレースしながら書いていこうと思います!トレースするサイトを見つける1枚画像で保存するIllustrator(Photoshop)の準備をする[定規]→[ガイド]を引いてサイズを調べるワイヤーをつくっていくアイコンボタン等のビジュアルをつくるトレースするサイトを見つけるまずは、お手本となるサイトを見つけましょう!本当に初めてトレースをする!という方は、リッチなデザインのWebサイトをお勧めします。ボタンやアイコンが立体的で、とても勉強になると思います!では、お手本となるサイトを探すのにお勧めなサイトをご紹介します。1ページ丸っとトレースするときにお勧めMUUUUU.ORG縦長のWEBサイトが厳選されています!1ページに大事なことが詰まっているので、初めは縦長のWEBサイトがお勧めです。ランディングページ集めました。こちらはランディングページのまとめサイトです。手っ取り早く引き出しを増やしたいならランディングページでも良い勉強になると思います!普通のWEBサイトよりも、「これを目立たせたい!」「ここ大事!」という主張がわかりやすいので、素材作りの参考になりそうですね。3000こちらは有名ですよね。本当に素敵なWEBサイトがまとめてあります。81-web.comこちらも最近のカッコイイWEBサイトをトレースするときにお勧めです。collectionこちらはスマホサイトをトレースしたいときにお勧めです。色別に見ることもできます。いくつか試してみたのですが、スクロールバーが入っちゃったり、変にきれちゃったりするものがあり、こちらに落ち着きました。こちらも簡単にページ全体のスクリーンショットが取れます。ダウンロードはこちらさて、私は今回こちらのサイトをトレースしたいと思います。ポカリスエットみなさんご存知ポカリスエットです。TOPページの量がそんなに多くないのと、ある商品のPRページのトレースをしてみたかったので、こちらを選びました。Illustrator(Photoshop)の準備をする私は、まだまだひよっこなので見本画像を下に敷いてトレースします。慣れてきたら見本を横に並べてやると、もっと上達しそうですね。それでは実際にトレースしていきます。今回はIllustratorでやります。イラレで新規ドキュメントをつくります。(プロファイル[Web])見本の1枚画像を配置します。レイヤーに[お手本]とか名前をつけると分かりやすい。[オブジェクト]→[アートボード]→[オブジェクト全体に合わせる]で、アートボードを画像に合わせます。(画像を拡大/縮小は絶対にしない!)お手本は、ずれたりしないようにロックをかけておきます。全体をみて、サイトがどんな構成になってるか判断できる人はここでレイヤーを先に作っておくといいかもしれません私は毎回この下準備をします![定規]→[ガイド]を引いてサイズを調べる準備ができたら、まずはガイドを引いてみます。ヘッダー/コンテンツ/フッターくらいは最低限引いておきたいところです。今回は簡単に引いてみました。ガイドとガイドを選択し、変形パネルを見ると、widthやheightがわかります。(黄色いガイドが選択されている部分です。)こんな感じでいろんなサイトのサイズを測ってみると勉強になります!それからワイヤーを作る時にもガイドが引いてあると、ピタッと位置合わせができて良いですよ^^ワイヤーをつくっていくそれではワイヤーを作っていきます。サイズを確認しながらぽちぽちなぞっていきます。丁寧にワイヤーを作るとこんな感じ。(クリックで拡大)時間がないときは、テキストのところは省略しても大丈夫だと思います。アイコンボタン等のビジュアルをつくるそれでは実際の見た目の部分を作ってみましょう!ここで注意するのは、色は必ずスポイトで取ること。ちなみにスポイトをドラッグしながら画面外に持っていくと、あらゆるところから色の取得ができます!そして制作時間約3時間で出来上がったのがこちら。いかがでしょう??今回はフラットでシンプルだったのでそんなに時間かからずにできました!ちょこちょこズレが気になるところもあったのですが、忠実に再現するよう心がけてみました・・(コンテンツ下部の1pxのズレとか)実際にビジュアルを作るときに気をつけておきたいところまとめ・写真はワイヤー上に◯×◯pxなどで分かるようにする・フォントのサイズや各コンテンツのサイズに気を配る・テキストは正確でなくてよいので大体同じとこはコピペで・何時間かかったか大体めもっておく。・スクショのサイズは絶対変更しない。アートボードを合わせる。・色はスポイトで取る大体こんなところを気をつけておくといいと思います。まとめ今回の記事ではかなり細かく段階を踏みましたが、実際は最後のビジュアルの部分だけやられる方も多いとおもいます!私は毎回ガイド引いてワイヤー作って・・とやっていきます。トレースやってると、これを作った人はどんな気持ちでこういうデザインにしたんだろう??と考えることができて、とても頭を使います。今回のトレースでの気づき・まとめはまた次回の記事に書こうかと思います!と、いうことで-手順編-は以上になります。トレースやってる方の、自分はこうやってるよ!情報をぜひ聞いてみたいです^^以前の記事はこちらWebデザイン力を上げる。・Webデザイン力を上げる。Illustratorをマスターしたい!-シェイプ形成ツール-・イラレでギザギザをつくる。ついでに角丸もつくる。Webデザイン力を上げる。(3)PopularWebデザイン力を上げる。Sans」を使ってみた。17,570ビューイラレで縦横固定の一括リサイズmemo15,355ビューWebデザイン力を上げる。Webトレースをやってみよう!-メリット編-9,544ビューイラレでギザギザをつくる。ついでに角丸もつくる。自分用のメモだったり、学んだことだったりを記事にします。UNITEDのいちメンバーとしても活動中。故郷熊本にちなんだLINEスタンプをつくりました。【ポートフォリオサイトはこちら】PopularWebデザイン力を上げる。Sans」を使ってみた。17,570ビューイラレで縦横固定の一括リサイズmemo15,355ビューWebデザイン力を上げる。Webトレースをやってみよう!-メリット編-9,544ビューイラレでギザギザをつくる。ついでに角丸もつくる。自分用のメモだったり、学んだことだったりを記事にします。UNITEDのいちメンバーとしても活動中。故郷熊本にちなんだLINEスタンプをつくりました。