月別アーカイブ: 2015年4月

画像合成①

 これまで選択範囲を使って画像を選択する方法を紹介してきました。そこで本日はフォトショップでの写真の画像合成において、どうやったら違和感なく合成できるのか?について解説したいと思います。

1. 人物と背景のコントラストを合わせる

 違和感ない合成をするために必要なこととして、背景のコントラストと人物のコントラストを合わせる必要があります。それぞれコントラストが違うとそれだけで人物画像が背景から浮いて見えたり、逆に背景の印象が強くなりすぎて違和感が出てしまったり。そういったことが起きないように、それぞれのコントラストを合わせてあげる、ということになります。

2. あえて画像にざらつきを入れる

 1.のコントラストを合わせる、というのと似ているのですが、背景がもしざらつき(粗さがあったり)があった場合、人物画像も同じようにあえてざらつき加工をしてあげる必要があります。そうすることで背景画像・人物画像とも同じぐらいざらつきを出すことで違和感がなくなり、合成がキレイにできるようになります。

3. 光源を同じにする

 続いて、画像の光源を同じにしてあげる必要もあります。背景画像が右上から光源がきているのに、人物画像は左上から光源がきている…だと違和感があります。そのため、人物画像も右上から光源がくるようにしてあげることで、同じ光源から光がきている=合成として違和感が少なくなる、ということが言えます。

まとめ

 以上のようなことが画像合成の上で必要になってくる編集になります。上で紹介した編集を行うことで画像同士に違和感がなくなり、キレイな合成画像が出来上がると思います。

画像の補正

本日は画像の補正②です。
フォトショップでは画像の補正がとても高機能であり、多彩な表現が可能です。
選択範囲の作り方がマスターできたなら、ぜひ補正を頑張りましょう。
学ぶ順序としては選択範囲の作成→画像補正→画像合成がよろしいかと思います。
画像合成はまったく別の環境で撮られた写真を一つの画像として表現するので、しっかりとした補正と、選択範囲の作成が重要となります。

補正の復習として、レベル補正・トーンカーブ・シャープ・モノクロ(セピア)をピックアップして解説していきます。

■元画像

before

今回使用する画像はこちらの画像となります。色がハッキリと分かれているので、難易度は高めではありますが、教材としては十分でしょう。
まずはこの画像をアドビフォトショップに読み込ませていきます。

■レベル補正

level

基本的に一番明るい部分を白にし、暗い部分を黒にする範囲を決めることができます。
中間色については自動的に振り分けられますが、基準のハイライトとシャドウが動くと中間色にも変化があるので、それぞれ変った変化をもたらします。

■トーンカーブ

tonecarv

トーンカーブでもレベル補正を動かせますが、レベル補正は独立して使用した方が確認しやすいのでおすすめです。色調・明るさをグラフで感覚的に変更することができます。
チャンネルを変更することで、赤・緑・青の強弱も変更できるので、画像全体が赤っぽかったりした場合これによって調整が可能となります。

■アンシャープマスク

shap

アンシャープマスクは画像をくっきりさせる効果があります。ぼやけている写真を自動的にくっきり明確にしてくれます。カメラの画像のピントを合わせるイメージです。もちろん撮影時にピントを合わせますが、Adobe Photoshop上ではおおむね画像の解像度を変更した際におこる画像の劣化を緩和するためのツールとして使われます。

■モノクロ・セピア
monosepia

画像のカラースケールを変更することで、モノクロやセピアにすることもできます。
グレースケールでは、元画像の赤い部分や青い部分を濃くしたりうすくすることもできるので、違和感をかんじる部分の色には編集を加えましょう。

アドビ フォトショップでできることとしては少々地味なようにも思えますが、この補正が正直一番重要と言っても過言ではないので、頑張ってマスターしましょう!

選択範囲の作成②

 今回は人物写真から人物のみを選択し、背景画像と合成する方法を紹介したいと思います。
人物写真となるとイラストと違って毛先までちゃんと選択しないといけなくなるので、ちょっと工程が増えます。とはいってもフォトショップを使えば比較的簡単にできてしまうので、是非とも覚えてみましょう!

 例として、以下の人物写真から人物のみを切り取り、スタジオの画像に合成したいと思います。
human

gym

1. 人物写真をクイック選択ツールで切り取る部分を大まかに選択

human-2
 まず人物写真をフォトショップで開き、クイック選択ツールにて大まかに切り取る範囲を選択します。

2. 「境界線を調整」で毛先など細かなところも選択

human-3
 続いてクイック選択ツールを選んだまま、「境界線を調整」をクリックすると、上の画像のように別ウィンドウで設定画面が出てきます。ここで上の画像のように「半径調整ツール」を選び、毛先などをドラッグして毛先のみ切り取れるようにします。

3. 人物写真を切り取り、背景画像に貼り付けて違和感がないように調整

gym-human
 前段階で毛先まで細かく選択できたら、Ctrl + Cキーでコピーし、フォトショップで開いた背景画像にCtrl + Vキーで貼り付けます。
貼り付けたら、あとは画像の大きさを変えたり色調を変えるなどして、違和感がないように調整してあげて、合成画像の完成となります!

まとめ

 以上が人物写真と背景画像の合成方法になります。
選択範囲した際に境界線を調整を使って毛先なども細かく切り取れるようになることで、キレイに人物写真を切り取ることができるようになるので、是非ともやってみましょう。

選択範囲の作成①

 フォトショップで画像を開き、画像を合成する際に特定の画像の選択範囲を作成する必要があります。そこで今回はいくつかある選択範囲の作成方法の中から“クイック選択ツール”を取り上げたいと思います!

 今回は下の登山家のイラストから人物だけをクイック選択ツールを使って切り抜き、山のイラストに合成(貼り付け)たいと思います。
hito

yama

1. フォトショップで人物画像を開き、クイック選択ツールで人物のみ選択する

hito-2
 まず初めにフォトショップで切り抜きたいものがある画像を開きましょう。今回は人物の画像を切り抜きたいので、人物画像を開きます。

2. クイック選択ツールを選び、切り抜きたい画像の選択範囲を指定

hito-3
 続いてクイック選択ツールを使い、切り抜きたい画像に対してクリックしながらカーソルを動かし、範囲を指定します。ちなみにWindowsのPCを使われている方でしたら、Altキーを押しながらカーソルを動かすと選択範囲から外すことができるので、もし切り抜きたいところから少し範囲がはみ出してしまった場合はAltキーを押しながら範囲を削っていきましょう。
 そして範囲が指定できたら、Ctrl + Cキーを押し、選択範囲のコピーをします。

3. コピーした画像を貼り付けたい画像を開き、画像を貼り付ける

hito-4
 続いて先ほどの段階でコピーした画像を貼り付けたい画像を開いて(今回でいうと山の画像)、Ctrl + Vキーでコピーした画像を貼ります。そうすると上の画像のように貼り付けられるので、あとは大きさや向きなどを変更して違和感のないようにしましょう!
ちなみにできあがった画像が下になります。
yama-2

まとめ

 クイック選択ツールを使った画像合成の基礎の基礎の解説は以上になります。
絵の場合にクイック選択ツールで比較的簡単に選択範囲を作ることができます。例で紹介したように、境界線がしっかりしているものであればキレイに画像を切り取ることもできます。
しかし写真となると境界線がハッキリしていない場合もあるので、クイック選択ツールで切り取るのが難しくなることもあります。

 クイック選択ツールを使って写真でもどうやったらキレイに切り取れるのかについては次回お話したいと思います。

2種類のサイトマップ

サイト全体を把握するために作成するサイトマップ。わかりやすいサイトを制作する際には必ずと言っていいほど重要な役割を担っています。
しかし、サイトマップと一言で言っても、実はサイトマップには2種類あります。
本日はそれぞれのサイトマップの役割と制作方法をご紹介いたします。

16759820090_20f5b75870_z
■制作者にとってのサイトマップ
まず、HPを作成する過程の部分で必要となるサイトマップです。主な役割と致しましては、コンテンツの整理や、コンテンツをより理解しやすい下層ページに置くための設計図となります。ワイヤーフレームとの違いはデザインの設計図かコンテンツの設計図かの違いとなります。

制作方法は特に問われておりませんが、その会社内で有効な手段で制作しましょう。例えば、ほぼ1~2人で制作する場合においては、手書きでも構わないと思います。しっかりデータとして保管する場合においてはイラストレーターが便利でしょう。もちろん、見せる相手がユーザーではなく、プロであるため、ボックス・ライン・テキストのみで十分です。
しかし、制作人数が多かったり、場所が離れてしまう場合はCacooというWEBコンテンツを利用する手もあります。これはアカウントを取得し、オンラインでページデザイン・ワイヤーフレーム・サイトマップを作成・編集できるツールで、共有登録をすれば、任意のチームで一つのドキュメントを閲覧・編集することができます。
大人数・遠距離の作業となる場合はこちらで情報共有を行うと便利です。

■ユーザーにとってのサイトマップ
こちらのサイトマップは、ユーザーが主に使用するもので、ページコンテンツのひとつとして挿入するものです。役割としては、ユーザーがページ全体を把握でき、そのページ内の欲しい情報へ辿りつくためのルートを確保できる地図として使用されます。大きなページになるほど、欲しい情報の階層は深くなってしまうものです。しかし、このサイトマップさえあれば、ユーザーが迷うことなく、目的の情報にたどり着けるのです。もちろん、ひとつひとつのページやコンテンツ・デザインによって、サイトマップを見なくても目的にたどり着けるユーザーインターフェースを意識したサイト制作をすることが大前提なので、あくまで補助的な要素として用意しましょう。

制作方法については、もちろんデザイン構築からコーディングまで、通常のページ同様に見やすく、わかりやすいものにします。社内ではなくユーザー(顧客)に見せるものなので、当たり前ですが、サイトマップが分かりにくいページはかなり不完全なサイトと言っても過言ではありません。どのようなユーザーにおいても目的にたどり着ける目的をしっかり確保してくれるものです。例えば、ご年配の方は真っ先にサイトマップを確認する癖がある方が多くいらっしゃいます。html,cssが今ほど高機能ではなかった時代において、ユーザーインターフェースを意識したサイトは今よりの劣ったものとなっていました。ですので、サイトマップというものが生まれました。現在では必要ないほどにわかりやすいデザインができるようになりましたが、それでもそういったユーザーに対しても情報ルートを確保できるようにすることが重要です。
そういった細かい気遣いを怠らないサイトこそが、会社に利益を与える広告として評価されるのです。

相対パス・絶対パス

 Webサイトを制作する上で、ファイルの場所を指定する時に“相対パス”と“絶対パス”というキーワードが出てきます。今回はこの2つのパスについてお話したいと思います。

html-image
 まず上の画像のような階層でサイトを作ったとします。トップページであるindex.htmlとtestフォルダを置き、その中に各htmlファイルを置いてある状態です。この状態でレンタルサーバーにアップして、http://test.com/というURLでサイトを作りました。
その上で、index.htmlからtest1.htmlにリンクを張りたい場合の相対パスと絶対パスの時の違いを紹介したいと思います。

 相対パスの場合、リンクの指定場所は
test/test1.html
のみとなります。つまりはファイル場所のみを指定しています。

 絶対パスの場合、リンクの指定場所は
http://test.com/test/test1.html/
という風にURLで指定してあげます。

 ザックリではありますが、これが相対パス・絶対パスの違いになります。
住所で例えてみると、神奈川県A市に住んでいる人が隣の市の神奈川県B市に手紙を送りたいとした時に、たいていの場合は宛先を「B市~」としただけでも手紙は配達されます。おおよそ同じ地域なため、そのようなアバウトな宛先でもちゃんと手紙が届く…ということですね。でも、ちゃんと届くか心配の時は「神奈川県B市~」と詳しく書くと思います。こっちの方が確実に手紙が届くから。
これと同じことが相対パス・絶対パスでも言えます。同じサーバー上にファイルをアップしているため、相対パスでリンクや画像の場所を指定してもリンクがちゃんと張られたり、画像が表示されます。ただ、その他にもサーバーにアップされている状態であれば、URLでリンク場所を指定することも可能で、それが絶対パスと呼ばれるものとなります。

 では、相対パス・絶対パスのどちらでリンクは張るべきなのか?
この答えは厳密にはどちらでも良い、になります。ただ、リンク場所を確実に指定できるという点からいえば、URLでリンク場所を指定する絶対パスの方がオススメではあります!

イラストレーター実力テスト

本日はイラストレーターのテストを実施しました。
みなさん切磋琢磨しながら取り組んでおり、分からない部分を調べながらやっていましたが、実際に企業に行ってからもこういった作業が多いですので、ぜひ頑張って欲しいところです。

さて、本日はその模範解答の説明をしていきます。

【1】

0420_1

解答は以下の様になります。

0420_1ans

×は答えが存在しませんが、実際はCtrl+Shift+Zでやり直しとなります。

これに関しては解説はそのまま記述されているので、割愛させて頂きます。

【2】
(1)
0420_2

こちらの問題は「楕円形ツール」を使用します。
しかし、pxでサイズをしていされているので、ドラックでおこなわず、
楕円形ツールを選択した状態でドキュメント上をクリックします。
すると、以下のウィンドウが表示されます。

0420_2ans

赤い部分に指定されたサイズを記入し、完成です。

(2)

0420_3

基本的に(1)と同じになります。
しかし今回は「スターツール」を選択しましょう。
するとウィンドウの記載内容が変わり、外円・内円・点数が設定できます。

0420_3ans

指定されたものを記入して完成です。

(3)

0420_4

こちらの図形については、先ほど作成した二つの図形をそれぞれコピーして使用します。パスファインダーは重ね順や色によって異なる図形の描画になるので注意して行いましょう。

0420_4ans1

まず、図形を参考画像のように重ね、パスファインダーのウィンドを表示しましょう。

0420_4ans2

必ず、二つの図形両方を選択した状態にしてください。
選択ができたらパスファインダーボックスの「合体」(一段目の左端)をクリックします。
二つの図形が合体し、一つの新しいオブジェクトとなりました。

(4)

0420_5

この問題も先ほどと同様の図形を使用しますが、重ね順が重要になります。
必ず星型の図形を前面に配置してください。
円が全面にあると、ちがった図形が出来ます。
後は手順は同様に行います。

0420_5ans

今度は「前面オブジェクトで型抜き」(一段目左から二番目)をクリックし、完成です。

(5)

0420_6

今度は若干難しいです。しかし、こちらも配置をしっかりしていれば、一度のパスファインダーで作成することが出来ます。
もちろん、「合体」と「前面オブジェクトで型抜き」を組み合わせても可能ですが、作業時間短縮を意識していきましょう。

もともと回答欄に設置されている小さい青円を最前面のオブジェクトにしてください。その下にオレンジの円、星を一番下に持ってきます。
位置にも注意して下さい。
オレンジの円がの側面が星の内側の角にちょうどぶつかる位置。
青円は青星の部分と重なるようにしましょう。

0420_6ans

その状態で全てを選択し、パスファインダーのボックスの「合流」(二段目の左から三番目)をクリックします。

あとはグループを解除し、オレンジの位置を調整したら出来上がりです。

(6)

0420_7

これに関しては難しく考えないでください。ペンツールの使い方についての問題となるため、すべての角度が90°であればずれていてもかまいません。

やりかたはとてもシンプルです。Shiftを押しながら、90°の位置でパスを作成していきます。

0420_7ans

最後のパスの位置は初めのパスの位置に依存した角度となるため、ガイドを使用して90°になるようにパスを打ち込みましょう。

(7)

0420_8

こちらもそのままコピーはかなり難しいと思います。
パスの位置の割り出しは結局、元のデータ自体が均等な位置にパスを打っているかどうかによって決定しますので、こういった図形に関しては形をまねるだけで結構です。

ただし、注意ないといけない部分があります。

0420_8ans

パスを増やしすぎるとなめらかな曲線は描けません。そのため、二つのパスの間で出来る限りの設定を作成してあげます。参考画像のようにアンカーは始点と終点それぞれに存在するので、その二つの設定をしっかりしてあげましょう。

この羽についてはアンカーポイントの設定をしっかり把握していないと難しいでしょう。

(8)

0420_9

テキストの設定です。これに関しては後ろに実際のテキストがあるので、比較的合わせやすかったと思います。
ちなみに、設定の全貌は以下の通りです。

0420_9ans

①Wの横幅を縮めました。
②デザイナーの文字の間隔を調整しました。
③-(ハイフン)高さを中心になるよう設定しました。
④数字のテキストと日本語文字のテキストは大きさが異なるため、サイズを大きくしました。

(9)

0420_10

次は名刺を制作した際に使用したトリムマークとガイドの作成です。
まずはトリムマークをつけましょう。

0420_10ans

トリムマークをつける長方形を選択した状態で、
ツールバーのオブジェクト→トリムマークの作成
これでトリムマークが作成されました。

0420_10ans2

次にガイドを作ります。
ガイドにする長方形を選択した状態で、
ツールバーの表示→ガイド→ガイドの作成
これで長方形のガイドが作成できました。

(10)

0420_11

次は簡単な地図制作です。
線を記入していくことについては問題ないと思いますので、
線路とクリッピングマスクについて解説していきましょう。

線路はまず黒い部分となる線を作成し、その上にもう一つ線を重ねます。
線をコピー→前面に貼りつけ。
前面の線を選択した状態で、線のウィンドを表示します。

0420_11ans

色を白にかえ、太さを少々補足します。
破線にチェックをいれ、線幅と間隔をしていして完成です。

0420_11ans2

次にクリッピングマスクです。
下にあらかじめ用意された図形を完成した地図のくりぬきたい部分に設置します。
※地図内のすべての図形と先ほど設置した図形、全てを選択してください。
右クリックでクリッピングマスクを作成で、要らない部分が非表示になりました。

(10)

0420_12

押し出し・べベルを使用します。

0420_12ans

まず、図形を用意します。サイズは調べようがないので、この場合は適当で大丈夫です。

0420_12ans2

ツールバーの効果→3D→押し出し・べベルをクリック

0420_12ans3

設定はデフォルトのままで大丈夫です。

(10)

0420_13

最後にアピアランスです。

0420_13ans

まずある程度のテキストを作り込んでおきましょう、こちらもアピアランスで可能ですが、実際に教えていないので、まず文字ツールで編集します。

0420_13ans2

テキストを選択した状態で、アピアランスを開きます。
塗り・線の順番を入れ替え、線幅を太くしましょう。
最後に色を設定して完成です。

以上となります。
いかがだったでしょうか?
実際に使用する分には今までとは変わりなかったと思いますが、講師に聞けない人に聞けない状況下での制作は難しく感じたかと思います。
しかしながら、実際にWEB制作に就職してからは同じような状況に陥り、自ら解決していかなければなりません。

やった事は確実に覚え、わからないことは自分で調べてわかるようにする。
それが、WEB制作を職とするのに必要不可欠な技術となってきますので、
その状況を楽しみながらがんばっていきましょう!

課題発表プレゼンテーションの評価

【R・Oさん】
発表方法:
メモを用意して段取りをしっかり持っている。アイコンタクト・ボディランゲージがあるともっといいと思います。
企業研究内容がよくできており、理解しやすい。
サイトマップは見やすくシンプル。しかし、ページ内リンク(下層ページが充実している)
ブログの提案の理由が明確でクライアントの事をよく考えている。

デザイン:
スマホサイト コンテンツが少ないかもしれない。文字の横幅も画像に揃えてあげた方がいいかと思います。文字が少し小さいと感じます。

PCサイト:
雰囲気の作り方が上手く、イメージが伝わりやすい。一目でこの企業のギターを想像できる。リンクボタンの部分がちょっとわかりにくいので、ボタンを作ってあげるといいです。アイキャッチの文字が少々見辛い。

【T・Nさん】
発表方法:
コンセプトが詳しく明示されており、女性向けギターの販売ページとしてのデザインという目的がはっきりしている。もう少し企業がどんな事を意識しているのかを

デザイン:
スマホサイト 色の使い方がとてもうまい。女性らしさがとてもでたサイトだと感じます。もう少しコンテンツを入れてあげた方がいいと思います。

PCサイト:
基本に忠実なレイアウトで分かりやすい。実際にありそうな雰囲気があるが、アイキャッチの画像ももう少し女性を意識したものがいいと感じます。黒の淵が目立つので、なくしても綺麗にみえると思います。

【R・Hさん】
発表方法:
もう少し企業の内容が知りたい。全体像だけでなく、拡大して個別に説明してあげると見やすい。コンテンツがしっかりしており、ボリュームは十分にあるので、企業分析・客層は頭の中でちゃんとまとまっていると思います。もっといっぱい伝えていきましょう。

スマホデザイン:
色がちょっと見辛く感じてしまいます。まずは自分の感覚で決定するよりも、色見本から奪い勉強していく方が良いかと思います。

PCデザイン:
システムの事も考慮したデザインでとても良いです。下のメニューの色区分が少々個性的であまり他の人には理解しがたい可能性があるので注意しましょう。

【T・Kさん】
発表方法:
企業のこだわりは明確だが、販売においての戦略があったらもっとよい。いっぱい真面目に考えていることはよく伝わってきますし、ひたむきさを感じます。正直、それで十分ではありますが、相手を共感させるという目的でプレゼンの発表を練っていくといいですね。

スマホデザイン:
ボタンの発想がとても良くできていて、デザインの作り方も個性的で面白い。しかしながら、流行のデザインというものがあるので、次回はそっちの方を研究してやってみるととてもいい経験になると思います。

PCデザイン:
隠れていたギターの全貌が見えるようになったのは個人的に好きです。メニューは優先度が高いので、文字を見やすくしてあげるとよいと感じます。

【N・Aさん】
発表方法:
声に特徴を持たせてインパクトを持たせるのは大事です。ヒトラーも演説でそういった方法をとっていましたしいいなと感じますが、笑っている人は話をなかなか効きにくいものです。コンセプトがアーティスティックすぎると思います。ニッチなギター会社はいますが、そういう会社は自社でHPを作る傾向があるので、注意しましょう。一生懸命作っていたサイトマップも拝見したかったです。

スマホデザイン:
雰囲気はとてもよくコンセプトにあったデザインですが、文字が少々見えづらい。コンテンツが充実してるので良かったです。

【R・Aさん】
発表方法:
ギター会社のイメージが明確で、コンセプトもはっきりしていてデザインの共感を集めやすい。せっかくなら立って伝えた方が伝わるとおもいます。
サイトマップも充実している。下層ページは階層深くしすぎないのは重要ですが、リンクをはってしまえば大丈夫です。3階層までは作っても大丈夫です。

スマホデザイン:
完成度がとても高いです。何よりわかりやすいですし、コンセプトである認知度の高いメーカーとしてはレイアウトの作り方が考えこまれているのが良くわかります。
特に色の統一感とアイコンの分かりやすさがとても評価できます。ここまでくると改善点を探すのに本気を出す必要があるくらいなので、素晴らしい出来です。

【N・Aさん】
発表方法:
ユーザーインターフェースについてはよく考えられています。しっかり考えられてはいるのですが、会社自体のコンセプトの伝え方が不明確であるので、その点を先に明確に説明してあげるといいと思います。根拠→結論の順番に説明することによって、相手を「なるほど」と思わせることが出来ます。

スマホデザイン:
余白がないから違和感を感じるのだと思います。ひとつひとつのボックス、もしくはコンテンツの間をわけてあげると、色のバランスはよく出来ているのでそれでかなり良くなると思います。ただスマホサイトはそういったデザインが多いですし、大きな問題ではないでしょう。実機で確認してからの作業なので、デザイン案としては十分だと思います。

【K・Mさん】
発表方法:
実際のサイトを見本にしたことを伝えることによってそのデザインにした理由が明確に見えて良いです。ただ、もう付加価値でそれを参考にした上で、自分がどういった会社でどういった理由でそのデザインを選択したのかを説明すると説得力がでると思います。
宮原さんは博識なので、色んな事をご存じだと発表で感じました。
その情報をあらかじめ整理して、発表の時はそのないようにしましょう。

スマホデザイン:
多分デザインをコンテンツによせていったのだと思いますが、順序としては逆の方がいいかと思います。コンテンツをしっかり決めたうえで、それに適したレイアウト・デザインを選択してあげましょう。

【W・Kさん】
発表方法:
実際のロック三味線という明確なテーマがあるのでデザインの共感度がとても高いです。企業研究が良くされています。三味線というニッチなジャンルの売り方をもう少し考えると明確なデザイン・レイアウト案がでたかなと感じます。

スマホデザイン:
和文化というものを一切払拭している中に三味線があるので、伝わりやすいと感じますが、一番初めのイメージで三味線を売っているサイトというイメージがわきにくくなってしまっているので注意しましょう。

PCデザイン:
サイドバーのデザインが少々PC用に変更してあげた方が見やすいと思います。PCについてはボタンが大きくする必要性があまりないので、簡潔にしてあげたほうがいいと思います。ブログをのせてあげるのはとても良いことだと思います。

【K・Sさん】
発表方法:
コンセプトが初心者入門ということですが、もう少し戦略がわかりやすいとデザイン
を構築する方法がわかり、スムーズに作業が作れたと思います。やはり企業の全体像が把握できたかなとおもいます。しかし、なにより伝えようとする姿勢がひしひしと伝わってくるので、後は技術面を磨けば、説得力はうまれます。

スマホデザイン:
色が与えるイメージを考えてみてもいいかと思います。全体的なデザインが少々バランスが悪いですがひとつひとつのデザインはいいので、最終的なバランス

PCデザイン:
レイアウト・コンテンツに関しては文句なく、仕事で通用するレベルだと思います。しかしながら、デザインのレパートリーを増やすべきかと感じます。基本的にフラットデザインで作られていますが、枠線が存在することで立体感がでてしまっています。

【K・Tさん】
発表方法:
一言一言をメモにかいて読んでいるイメージがあるので、基本的には話す見出しをメモに書いて重要事項のみをメモしておきましょう。そこから説明内容はその場に合わせた発言をするのが有効です。デザインのセンスを持っていると思うので、もっと自信を持って発表したほうがいいです。作った本人が不安であれば、それを見た人も不安になってしますので、出来が悪いと感じても完璧にできた気分で発表しましょう。

スマホデザイン:
本当に存在するギター会社のようなページで良いデザインだと思います。文字サイズが小さく感じます。画像選びがとてもうまいのですが、その反面、ボタンやメニュー・コンテンツ等のデザインがもう少し色んなパターンを用意できるといいと思います。

PCデザイン:
英語にする場合の注意点としてカタカナで表現できるものであれば大丈夫です。スマホとPCのデザインが変化がないという事はユーザーインタフェースはあまりいいとは言えませんので、画面の大きさの違いを意識するともっとよくなるかと思います。

【H・Nさん】
発表方法:
ひとつひとつの項目を明確に意識した方が説得力があると思います。デザインもアーティスティックなデザインとなっているため、王道からは離れている。ということはそれが「売れる」と相手に思わせなければなりません。企業分析・客層ターゲットをまとめ、サイトマップ・ワイヤーフレームを意識しましょう。

スマホデザイン:
イラストとデザインのバランスが取れていない気がします。イラストに手が込んでいる分、全体的なコンテンツ・デザインが少々シンプルになっているため、イラストにばかり気がとられ、情報が入ってこない印象があります。

PCデザイン:
デザインが初めからできる人はいませんが、センスは十分にあると思います。やはり、そのセンスを生かすためにも、色んな良いデザイン・悪いデザインを見て、目を肥やしていくといいかと思います。

【Y・Hさん】
発表方法:
コンセプト・ターゲットも良く練られているのでコンテンツが理解しやすいです。ただ、客層やターゲットが定まっていないのでデザイン的にぶれてしまっている点が見受けられます。基本的に悩んでしまう部分に関しては情報というとっかかりさえつかめれば、なんなく超えていけます。

スマホデザイン:
全体的なコンテンツは十分なボリュームがありますが、ひとつひとつのデザインについて、もっと他のサイトを参考にした方がいいと思います。また、すべての部分において、どうしてそういったデザインにしたのか説明できるように考えていきましょう。

【A・Yさん】
発表方法:
細かい理由が考えられていて、とても説得力のある発表でした。ちょっと緊張してしまって普段と変わったイメージでしたが、それは本当に慣れだと思うので、数をこなしていきましょう。実際のデザインはとてもしっかりしているので、プレゼン次第ではいくらでも欲しがる企業はいます。自信をもっていきましょう。

スマホデザイン:メニューの部分が一番目立ってとても良いですが、文字がデザインにつぶされてしまってるので、コンテンツ優先でデザインしていきましょう。テキストの加工が特にされていないので、その部分で改善していけばもっと良くなるでしょう。

イラストレーターを使ってライブトレースをやってみよう

 イラストレーターにはライブトレースという機能があります。これは写真などの画像をイラストレーターで取り込み、パスのアウトライン化をすることが可能となり、イラストとして色を変えたりすることができる機能のこと…と思っていただけたらと思います。

 今回は下の画像をイラストレーターでライブトレースしたいと思います。
103

①イラストレーターで画像を開く
car-1
 まず、イラストレーターで上のように画像を開きます。

②画像を選択してライブトレースする
car-2
 続いて画像を選択した状態で右上に赤く囲ってある「ライブトレース」をクリックします。

③ライブトレースされた画像を拡張してパスのアウトライン化
car-3
 続いて画像を選択したまま上の画像で赤く囲ってある「拡張」をクリックしましょう。
そうすることで下の画像のようにパスがアウトライン化して各パスを選択できるようになります。
car-4

 以上が画像をイラストレーターでライブトレースする方法になります。
これを使えば、手描きのイラストを画像としてイラストレーターに取り込み、ライブトレースさせることでイラストレーター上で線や色などを編集できるようになります。
絵そのものはペンで書きたいけど、色はイラストレーターで塗りたい…などといった時にこのライブトレースは使えるので、是非活用してみましょう!

地図制作②

今回は前回の続きから始めていきましょう。

【地図制作の方法②】

■道を描画する
tizu04
前回作成した「道」レイヤーに線ツール・ペンツールを使って道を作成していきます。
方法は簡単ですので、ポイントとしては道の大きさを3~4段階で共通の線幅にしてあげ、大通り・中通り・細道という形に整理してあげましょう。
出来たらレイヤーを固定しておきましょう。

■川を描画する
tizu05
レイヤーを作成し、「川」を作成し、線ツール・ペンツールを使って川を作成していきます。
出来たらレイヤーを固定しておきましょう。

■線路と駅を描画する
tizu06
レイヤーを作成し、「線路/駅」と名前を変更。

①線路
黒線を二本用意し、コピーします。片方の線を線ツールで編集していきます。
内容としては色を白、太さを若干細く、破線にチェックで出来ます。

②駅
駅については長方形ツールで白塗り黒線で図形を作っておきましょう。
出来たらレイヤーを固定しておきましょう。

■テキスト
tizu07
レイヤーを作成し、「線路/駅」を作成
駅名や通りの名前を描画していきましょう。
出来たらレイヤーを固定しておきましょう。

■クリッピングマスクで枠内におさめる
すべての地図が出来上がったらクリッピングマスクで不要部分を取り除きます。
必ず作業の前にバックアップとして別名保存しておきましょう。
背景レイヤーを非表示にし、レイヤーのロックを全て解除します。
背景レイヤー以外のレイヤーをすべて結合し、アウトライン化させます。
地図のおおきさにあわせて長方形を描画します。
tizu09
すべてのオブジェクトを選択した状態で右クリック→クリッピングマスクを作成で完了です。

tizu10

これで完成です。