WEBデザイナーの覚書WEBデザイナーの覚書WEBデザインは書籍を読んでもわかりづらいところがあると思います。ここでは現役のWEBデザイナーがテクニックを覚書として更新していきます。gR2VZguFkaRm女性を切り抜いて他の背景と合成したいけど、髪の毛の所をどうしよう...そんな時の方法です。ホームページ制作だけではなくDTPにも使えます。この方法はなるべく解像度の高いきれいなデータの方が上手くいきます。小さいのしかない場合は、消しゴムブラシを不透明度50%くらいにして、すこーしずつ、髪の毛の隙間をちまちまと消していくしかないです。2950px×2040pxのサイズでためしてみます。下のレイヤーに色を敷いておくと後で切り抜き具合を確認しやすいです。(ここでは水色のレイヤーを敷いています)ペンツールでパスをかきます。体の線は通常通りに、髪の毛はおおざっぱに周りを囲います。おおざっぱに不要な背景を消した所。調整」ウィンドウを出します。「境界線を調整」ウィンドウの左の方にブラシマークがあります。ブラシツールの要領で、髪の毛の輪郭あたりを塗っていきます。OKを押すと、選択範囲ができています。この選択範囲を使用して、deleteしてみます。(選択範囲が人物になっている時もあるので、その時は背景を選択するように反転させます。gR2VZguFkaRmWeb制作のカラーリングの方向性を決める時に、無限の色の中からでは迷うことがあります。niteの勉強会で習ってきたオリジナルのカラーチャートの作り方です。Kularのパレットは便利で有名ですが5色くらいなのでもう2、3足りないことがあります。これならカバーできます。クライアントから寺をテーマにしたサイト依頼があったとします。寺から落ち着き、緑の豊かさ、静謐、伝統などのキーワードを派生させ、イメージを膨らませます。写真を集めてphotoshopで切り張りします。photoshopフィルタのモザイクをかける。細かすぎず大きすぎずの所で調整するのがポイント必要に応じて、トーンカーブでコントラストを付けて明るさだけ調整してください。地味な中に、差し色が入った結果となりました。全体を引き締める差し色の役割が大事だと学びました。gR2VZguFkaRm室内写真の画像補正をするホームページ制作やDTPで、撮影した写真をそのまま使用できる時もありますが下準備が必要なこともあります。今日はインテリアの補正についてです。全体を見て見栄えが良くないもの(ゴミや段ボールなど)が写っていたらチェック。スタンプツールで消します。次に...室内は暗くなりがちです。いらない物が消せたらトーンカーブで全体を明るくします。印象を明るくするために、小物の色彩だけを選択し、鮮やさを強調すると全体の印象まであかるく見えます。例として植木の緑をイキイキとさせる方法です。先輩から聞いた早いやり方を紹介します。補正したい所を長方形選択ツールで適当に選びトーンカーブをクリック。上に引っ張って全体を明るくします。Rだけを減らすと緑が強くなります。Bをこの方向に引いて黄色を足すと黄緑っぽくなります。マスクしてある所を消しゴムのブラシで葉っぱのカタチに合わせて消します。丁寧に作業していくと、、、全部葉っぱのカタチが鮮やかな緑になりました。gR2VZguFkaRmデザインをpdfにする方法です。出来るだけ画質を落とさずに、しかしメール添付できる程度の使い勝手の良い書き出しができるとファイルを開ける人にストレスをかけずにすみます。1.まず印刷入稿用のキレイなpdfから。Illustratorでファイル→別名で保存→PDF/X-1a形式を選択→サムネイルを埋め込みにチェック::::::::結果:::::::::::2.72MB→見た目きれいですので、お送りしてプリントして頂く場合によさそうです。添付するのは避けて、どこかのサーバにアップロードしてそのURLをお伝えしましょう。2.もう少し軽くする方法をやってみましたIllustratorでファイル→別名で保存→Illustrator初期設定を選択、Illustrator編集機能保持のチェックはずす→圧縮→ダウンサンプルをバイキュービック法にする→圧縮ZIP::::::::結果:::::::::::2.41MB→あまり変わりませんでしたが少し軽くなりました。設定数値が入っていますが100ppiにおとしても結果同じでした。3.まだまだ重いという方はもっと軽くできます...最小ファイル書き出しにすれば簡単じゃないの?と思わるかもしれませんが(Illustratorでファイル→別名で保存→最小ファイル書き出し)これは確かに結果421KBと、一気に軽くなりますが画質がこんなに荒れてしまいます。そこで先ほど書き出した1または2をAcrobatで開きます。Proの場合→ファイルメニュー→名前を付けて保存→サイズが縮小されたPDF→既存を保持::::::::結果:::::::::::492KB→これなら、メールで気軽に送れます。これくらいの画質です。gR2VZguFkaRmWebサイトのfirst-view内で構成の要となる、header。その「バランスが良い」とは、どういう状態なのでしょうか?ここにサンプルがあります。人は、色が塗られている面を「重い」と感じ、塗られていなかったり色が薄い部分を「軽い」と感じます。分かりやすくするため、サンプルをモノクロに変換してみます。例の修正前は右側にヘッダが偏り、不安定です。naviを画面の端から端まで引き伸ばし、安定しました。使用するロゴが高品質で、インパクトのあるものあったり、ロゴの色面が重かった場合は修正前のレイアウトでもOKになる場合があります。今回の場合はロゴが薄い色でしたので、このように修正をしました。レイアウトが完成したら、モノクロに変換してみてバランスをチェックしています。DTPなどでも参考になるかと思います。