Photoshopを使った、段落前のアキ／段落後のアキの使用方法。 Photoshopを使った仕事をし始めて早3年経ちますが、今日初めてこの機能をしりましたので備忘録。

Photoshopのスライスツールで1枚の画像から、複数の画像パーツに分けます。 例えばWEBページをトレースする際、フレームワークを抽出しつつ、画像パーツも収集する事が可能です。使い方（例としてLOFTのページを使わせてもらいました。） 定規ツールを利用し…

Photoshopのブラシツールで点線を描きます。やり方 ブラシツールを選択肢、「ブラシパネルの切り替え」をクリック ブラシタブを選び、間隔を100％以上にします。

人の顔を修正していきます。 顔を明るくする 肌の色を明るくして、血色を良くします。 「選択範囲」から「色域指定」を選びます。 選択を「スキントーン」にします。 「レベル補正」で明るさを調整する。 顔の白さを引き立てる（アンシャープマスク） 白い部…

Photoshopを使い、任意の場所をなるべく自然に消すことができます。加工前 加工後 やり方 消したいところを選択ツールで選択。 「編集」から「塗りつぶし」 「コンテンツに応じる」を選択した状態でOK

レイヤーマスクを使うことで、逆行をいれることができます。 加工後： 加工前： やり方 元の画像レイヤーを２レイヤー複製。 1レイヤー目をレイヤーマスクにする。 2レイヤー目に「フィルター」から「描画」「逆光」で、任意の場所に逆光を入れる。 1レイヤ…

Photoshopを使って、GIFアニメを作ります。 やり方 IllustratorかPhotoshopで絵を描きます。この時、レイヤー1枚につき１フレームです。 PSDファイルに書き出して、Photoshopで読み込みます。 「ウィンドウ」メニューから「アニメーション」を選択。 「アニ…

上の画像を使って、代表的なバナーの簡単な作り方を三つ紹介します。前提として、上記の画像にはフィルターをかけておきます。フィルターは、「フィルター」→「フィルターギャラリー」から、選択してフィルターをかけることができます。 縁取り文字 レイヤー…

ホームページの解析を通して、ホームページの作りを学びます。 アウトラインを見るホームページのアウトラインを確認するにはChromeのアドオンであるHTM5 Outlinerを使う。 HTML5 Outliner - Chrome ウェブストア URLバー右端のHTML5 Outlinerのボタンを押し…

Photoshopを使用して、連続する背景画像を作ります。全方向に連続した画像を作る。ページの背景に全方向に連続した背景画像を作ります。今回は雲の画像を作ります。 新規レイヤーを400*400pxで作ります カスタムシェイプツールから雲を選び、真ん中ぐらいに…

Photoshopを使い、角丸のナビゲーションボタンを作ります。作り方 750*80pxで新規ファイル。 角丸長方形ツールで左上をクリックして、750*40pxの長方形を作る。 スタイルから、好きなスタイルを選択する。 新規レイヤーを作る。 鉛筆ツールを使い、Shiftキー…

縦並びのナビゲーションボタンを作ります。ひとつあたり150*40pxです。 今回はCSS Spritesを使って一つの画像に複数のボタンを詰め込みます。また、ホバー時のボタンも同時に作ります。作り方 ボタンを5個作るので、幅300px高さ400pxで新規ファイルを作りま…

スタンプツールでは、画像上の画像をスタンプのようにコピーしながら描いていくツールです。 やり方 スタンプツールを選択しコピーの対象となる物体のうえでAlt+クリック 他の場所でドラッグしながら描く。 応用このコピーツールを使用することで、写真から…

ドロップシャドウで浮かびあがる文字を作ります。やり方 適当な文字を文字ツールで書き込む。 背景色と文字色を同じ色にする。 文字レイヤーを選択し、「レイヤースタイル」からドロップシャドウ。 出てきたプロパティの「角度」と「距離」を0にする。

レイヤーマスクを使うと、簡単な画像の合成や、アナログでは不可能なグラデーションのかかった合成などができます。やり方合成したいレイヤーを選択し、レイヤーマスクを追加します。すると新しく画像サムネイルの隣にレイヤーマスクサムネイルが生成されま…

Photoshopの選択範囲を利用して、画像を切り抜くことができます。 です。長方形ツールや楕円ツールのほかにも、特定のオブジェクトを切り抜くのに最適なツールがあります。 自動選択ツール自動選択ツールは似たような色を選択範囲にしてくれます。数クリック…

Photoshopを使ってポラロイド風の画像を作ります。 新規ファイルをつくります 下地に色をつけます（わかりやすくするためなので、何色でもいいです）。 選択ツールで長方形を作り、白色に塗ります。 そのまま選択範囲に境界線をつけます。 レイヤーコピーを…

写真の補正をすることで、写真をより引き足させます。 写真の補正には「イメージ」メニューから「色調補正」と、「調整レイヤー」を使用することで、「調整レイヤー」は後でその調整がいらなくなった場合消すことができます。レベル補正画像の階調幅を調整し…