PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

Photoshop

【Photoshop】 スライスツールで画像をパーツ分割

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

【Photoshop】 ブラシツールで点線を描く

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

【Photoshop】顔を修正する

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

【Photoshop】余計なものを消す

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

【Photoshop】 レイヤーマスクの応用「逆光を入れる」

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

【Photoshop】GIFアニメーションを作る

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

【Photoshop】一枚の写真を利用して、バナーをつくる

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

【HTML/CSS】ホームページの解析

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

【Photoshop】 連続する背景画像を作る

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

【Photoshop】角丸のナビゲーションボタンを作る

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

【Photoshop】 CSS Sprite用に縦並びのナビゲーションボタンを画像で作る。

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

【Photoshop】スタンプツール

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

【Photoshop】 ドロップシャドウで浮かび上がる文字をつくる

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

【Photoshop】レイヤーマスク

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

【Photoshop】 選択範囲

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

【Photoshop】ポラロイド風の画像をつくる

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

【Photoshop】写真の補正

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