今回はフリーのアイコン素材を使って、ショッピングサイトのグローバルメニューをつくります。今回は、素材がない時のデザイン方法を、キービジュアルをデザインする場合に絞って考えてみたいと思います。~入稿された写真素材のサイズが小さい・解像度が低い!そんな時のデザイン対処方法です。タイトル・見出し編グローバルナビ編の続編!簡単で見栄えのする見出しを作りましょう。今回はいくつかパターンをご紹介します。~前編~デザインを作る上で、必要となってくるのがテイストです。見た目も雰囲気もとても左右される大切な内容です。今回は、テイストの作り方についてご説明します。~後編~デザインを作る上で必要なテイストについて、今回は後編としてテイストの作り方を実践的にご説明します。~描き方編~初心者にとってとっつきにくいペンツール。トレースから作るイラストペンツールの使い方をある程度マスターしたら今度は、トレースをしてましましょう。今回は、写真をトレースしてイラストにします。実例で学ぶロゴデザイン今回は時間をかけずに作成するロゴの作り方をご紹介します。例としてWebサイトのロゴの作り方をまとめました。今回はイラストレーターの効果を使って、手書き風のイラストにチャレンジ。手を加えるだけでデザインに温かみがでてきます。悩まず作るコツとポイント作る時に悩んでしまうのは、作り方のルールを知らないからなのかもしれません。そこで今回は、悩まずロゴを作れるポイントをご紹介します。【フリー素材】手書き植物の素材セット長いように感じた冬も終わり、柔らかい青葉が芽吹いて春になりました。皆さまいかがお過ごしでしょうか?今回は手書き植物の素材...2014年10月15日イラストレーターを目指し活動中!~後編~※今回は少し趣旨を変えて、織田さんのイラストをページにちりばめました。学校で広告を学び、色々やってみたくなった。水彩絵の具のにじみは、アナログ表現の醍醐味ですよね。デザインというと「センスの良さ」が必要だと感じたことはありません...Webサイトを作るにあたって、情報収集やお店の情報を入手しデザインに入る際、ワイヤーフレーム、カンプの作成をすることになると思います。デザイン制作をするにあたって当然ながらいくつもの案を出す必要がありますが、その度に新しいファイルを作成して作っていませんか?複数のタブを開いている状態で何が何だかわからなくなることと思います。2015では新しく「アートボード」という機能が追加されています。CCをお使いなら知っている方もいると思いますが、Web用ファイルを新規作成しようとしたら出てくるこれです。私は初めこれが何なのかいまいちわからず、新規作成した後突然「アートボード」という文字が左上に表示され、なんじゃこりゃと思ってアートボードの部分だけを消してレイヤーを作成していました...。思い立って新しく追加されたであろうアートボード機能について調べてみたところ、実はこれ、かなりWebデザイン制作に特化した機能だったんです。アートボードについて知ろうAdobe社のアートボードの紹介ページです。動画を見るだけでも、機能についてしっかり理解できるかと思います。実際に作成してみよう例として作成しましたが、左がPC用、真ん中がタブレット用、右がスマホ用、といった形で編集することが可能です。このアートボード、左右の大きさを自在に変形、また、上下左右にあるプラスを押すと今編集しているアートボードと同じ高さや幅のサイズのアートボードが作成されます。アートボード内で幅などを調整することができますので階層ページなどに使ってもOKです。これだけでも、わざわざ新規アートボードを作成して、PCサイズ、スマホサイズに合わせて云々をする手間がなくなったのでとても便利になりました!更に、レイヤー内の名前を変更することでよりわかりやすくなると思います。おすすめはコーディングも想定して名前ごとに横幅(width)を書くと視認しやすいのでコーディングやレイアウトをする際とても楽かと思います。その他にも、要素によって切り替わる表示などもアートボードに記しておけばよりわかりやすいかもしれませんね。スマートオブジェクトで反映させてみようさて、大元であるPC版のデザインもできてきて、次はスマホ版。普通であれば、ここで別のファイルを新規作成してスマホ版用にページを作成していたかと思います。今度からはそんなことをする手間は必要ありません。隣のアートボードに追加すればいいだけです。例として前回作成したWebサイトをもとに進めていきます。foodの中にあるチョコレートパンケーキの画像をスマホサイトに移したいと考えている時、その画像を選択してコピーしながらドラッグ&ドロップすればいいだけです。楽チン!注意点としては、きちんと指定したアートボードの中に入っているかということ。ドラッグしている時に、どのアートボードに選択されているのか、というのがぱっと見わかるように表示されますが、誤ると別のアートボードに移動されたり、きちんと動作しなかったりしてしまいます。2015もお持ちの方はイラストレーターで作成したデータをスマートオブジェクトから編集することができます。やり方は、レイヤーの画像の部分をダブルクリックするだけ。先ほどコピーした内容そのままのものを持って来れば、そのコピーした画像もスマートオブジェクトの編集後に反映されるので、一つ一つ直す必要がありません。以下、分かりやすく図で説明します。はい、このような形で、スマートオブジェクト化されているので、編集もとても楽になりましたね。一つや二つならともかく、複数の画像を沢山変更するとなるとかなりの時間と労力です。時間短縮できるところはしていきましょう!デザインって突き詰めれば詰めるほど時間がいくらあっても足りないですよね。したい」と、色々考えると思います。いって、時間には限りがあります。それであれば、少しでも作業の時間を減らして、もっと構想の時間、話し合いの時間を増やしていく。いうことが大事なのではないでしょうか。〈目で見て楽しむ新しいデザインの本。