くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

Photoshop

[Photoshop]備忘録・ペンツールの描画に色をつけるには

Photoshopの操作についての備忘録。 ペンツールの描画に色をつけるには アウトラインに色を塗る等するには、一手間必要。 ①ペンツールでアウトラインを書き、閉じておく → パスの状態になる ②パスの状態では何もできないため、選択範囲にすることが必要。 「…

[Photoshop]カスタムシェイプによる切り抜き

以前のおさらい。 カスタムシェイプやテキストの形に他のレイヤーを切り抜く方法 ①背景レイヤー、カスタムシェイプツールで描いたレイヤーを用意する ②カスタムシェイプのサムネイルにカーソルを当て、CTRL+クリックする そうすると、カスタムシェイプの輪…

ベクトルマスクを利用した画像の合成

Photoshop CS5で、ベクトルマスクを使用した、下の2枚の画像の合成写真を作ります。 完成画像 1)ツツジの画像を配置します。レイヤーを右クリックして「スマートオブジェクト」に変換します 2)向日葵の画像を配置します。レイヤーを右クリックして「スマ…

[Photoshop]カンプからパーツをつくる

Photoshopでつくったカンプから、パーツをつくります。 スライスツールを使用します 見本のようなグリッドデザインでは1pxたりともズレてはいけません。レイアウトが崩れるもとです。サイズを厳密にするために、Photoshopでパーツをスライスする作業は慎重…

[Photoshop]バナーの練習

Photoshopでローソンのバナーを真似て作成してみました。 見本 このように写真や文字が重なっている場合は、作る前に順番を考えておくことが大事です。 上からの順番 ① 文字・ロゴ ② 枠 ③ 下半分の緑の領域 ④ 野菜の画像 Photoshopでレイヤーを増やすと上に…

[Photoshop]バナーの文字の装飾

バナーで良く使われる文字装飾 ①ふちどり文字 ②ブラー ③グラデーションで文字まわりの背景をぼかす ①ふちどり文字 文字を入力 効果 > 境界線にチェックする 位置は外側にする サイズは2、3pxほどがトレンド。漢字ではきれいにならないことがあるので、太…

[Photoshop]見出し画像・バナー画像のつくり方

Photoshopの練習に、見出し画像を2種類作りました。 日比谷花壇さんのサイトがお手本です。言葉や配置構成など一部はそのまま使用させて頂きました。(画像は無料画像を利用) ① 備忘録の為のポイントとつくり方のメモです。 画像は切り抜いた後、フチをガ…

[Photoshop]乗算で2枚の画像を合成

乗算は色のかけ合わせをするものです。この方法で2枚の画像を乗算で合成します [参考サイト]Photoshopの描画モード -「乗算(じょうさん)」- - 印刷の現場から-印刷通販WAVEのブログ 元画像 完成図 手順 ① ビルの画像を全選択(Ctrl + A)して、コピー(Ct…

[Photoshop] レイヤーマスクをつかって2枚の写真を合成

1.2枚の画像から一部を切り抜いて、合成写真をつくります 手前のサイを切り抜き、後方の高原にいるような合成写真を作ります ① サイをクイック選択ツール(またはマグネット選択ツール)で選択範囲にします *マグネット選択ツール使用中に、不要なところ…

[Photoshop]グローバルナビゲーション用ボタンの作成

PhotoshopでCSSスプライトでの横ナビゲーション画像の作成手順

[Photoshop]コピースタンプツール・ドロップシャドウ・光彩・クリッピングパス他(3月12日)

1.コピースタンプツール 「コピースタンプツール」機能は、指定した場所の画像をコピーして、別の場所にペイントする機能です。この機能を使用すると、画像からゴミやキズなどの不要な部分を綺麗に取り除いたり、複数の画像を合成したりできるため大変便利…

[Photoshop]画像解像度・写真合成(3月11日)

解像度とレイヤーマスク - Webデザインの勉強 風姿花伝 | 2月20日開講クラス 練習課題(1) - Webデザインの勉強 風姿花伝 | 2月20日開講クラス 解像度について 1インチあたりのピクセル数Macは72 dot/inch (dot per inch, dpi)Winは96 dot/inch紙データは7…

[Photoshop]ぼかし処理・写真の補正(3月10日)

3月10日 午後 ぼかしの練習 写真の補正 <ショートカットキー> Ctrl + A 画像全体を選択 Alt + backspace 描画色で塗りつぶす Ctrl + backspace 背景色で塗りつぶす Ctrl + I 選択範囲を反転 画像 角版 ・・・全体の情報(背景も含む) 例えば洋服なら、着…