WEB制作時にすこしあったらべんりなサイトを紹介します。

１.簡単にPCやスマフォのモックアップが生成できるサイト

デザインのスクリーンショットをアップロードするだけで簡単にデバイスのモックアップを生成しダウンロードできます。デバイスの種類や色もたくさん選べるので便利です。
https://dimmy.club/

２．色番号を取得するサイト

デザインで色が透過になっていて、コーディングの際に色味を調べるのが手間な時にここに元の色番号を入力すると透過％を含め色味を取得できます。
http://www.0to255.com/

３．ダミー画像をすぐに生成するサイト

WEBコーディング時にとりあえずダミー画像を入れておく際にその画像を生成するサイト。縦横の大きさ、色、文字などは自由に変更できます。
https://placehold.jp/

４．シンプルなHTMLをCSSで簡単にコーディングだけで実装

デザインからコーディングする際、変更しやすいようにできるだけコーディングのみで実装する方法です。参考にしてみて下さい。
http://fit-jp.com/cssheading20/

ドロップシャドウ、ガウスなどを使うより、
より自然でリアルに見える影の作り方

1,影になるベースのオブジェクトを作る

外側へ向かって濃いグレー→薄いグレー→白の順で、色が薄くなるように
ベースになる影を作る。
外側の白色の幅を広くするのがポイント。

2,作ったオブジェクトを選び、【ブレンド】

オブジェクト＞ブレンド＞ブレンドオプション ブレンドオプションでステップ数を指定 数が大きければ大きいほど、色の段階が細かい表現になる オブジェクト＞ブレンド＞作成
作ったオブジェクトの間がブレンドされ、グラデーションができる

3,ブレンドを乗算、微調整

ブレンドした箇所を乗算
上に今回はシルバーのレイヤーを重ねました 白矢印で選択できるので微調整も可能

比較

左：AIのグラデーションのみで作成
右：シルバーはPhotoshopのEye Candy 使用、さらにブレンドで影付け

リアルさが違いますね！

同様に影のオブジェクトを作って、ブレンド

こういう影の作り方も、ドロップシャドウで一気に影を付けるより、
より自然に見えます。

ディティールにこだわりたい時は、ぜひ一手間を！

１．パスで人物を切り抜きます。

パスで人物を切り抜きます。髪の毛部分はカラーチャンネルのレベル補正で切り抜くので、ざっくりと切り抜きます。

２．パスを選択範囲で切り抜いて、その切り抜きレイヤーを複製します。

この時、下にベタ塗りのレイヤーも用意しておきます。（あとで消す時に分かりやすいように） 下の方のレイヤーがカラーチャンネルのレベル補正をかけていくレイヤーです。

3．チャンネルタブのカラーチャンネルから１番コントラストがあるチャンネルレイヤーを複製します。

4.グリーンのチャンネル上でControl+L、レベル補正を表示

黒のスポイトで残したい色、白のスポイトで消したい背景を選択します。OK →「チャンネルを選択範囲として読み込み」を押します。

5.下の方のレイヤーを選択して、Deleteを押します。

6.上のほうのレイヤーを選択して、消しゴムツールで髪の毛の回りを消して行きます。

この時に下のベタのレイヤーを表示させると、消し忘れがなくなります。ベタの色は消す色によって変えて下さい。

7.最後にレイヤーを統合して完成です。

【考え方】

・aiのデザインのサイズをコーディング上でリサイズしない ・コーディング時にサイズを変えて欲しければ、デザイン上で修正する

《デザイン時にピクセルで書き出すことを気にしなくていいもの》 ・CSSで指定するもの ・コーディングで入力するテキスト

《書き出し方にこだわる画像の優先順位を考える》 ・【最優先】外枠や罫線、テキストの配置場所などのデザイン上でブレが目立つ箇所 ・【努力目標】出来るなら、画像内に配置されているオブジェクトも

【ピクセル】

ピクセルプレビューにチェックを入れて作業する

右クリック＞ピクセル最適化 無理矢理ピクセルに合わせるので、写真、曲線のオブジェクト、テキストなど、 変形してしまうものは適さない。 線のデータはパスをアウトラインして、ピクセルに最適化する。

 

CCからの新機能

https://helpx.adobe.com/jp/illustrator/using/pixel-perfect.html