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

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

2014-10-02から1日間の記事一覧

【Photoshop】顔を修正する

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

【Photoshop】余計なものを消す

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

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

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

【JavaScript】 クロスフェード(jQueryのプラグイン)

jQueryのプラグインクロスフェードを使うことで、フェードして置換する事ができます。 jQueryの適応方法jQueryをヘッドで読み込ませます。 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> クロスフェードプラグインを使う。CSS Crossfader 上記のリンクからcrossfaderをダウンロードする。htmlにプラグイ…

【RWD】可変レイアウトの演習2

可変レイアウトの演習をまたやりました。 今回はゼロから始めるレスポンシブWebデザイン入門を参考に行いました。今回はモバイルファーストの考えでレイアウトが構成されています。 ブラウザレビュー1024px以上 それ以下 ソースhtml <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>豆はカラダにイイ|</title></meta></meta></head></html>…

【RWD】 ディスプレイの大きさごとに分けたCSSを一つにまとめる

CSSの中media screenを入れることで、ディスプレイの大きさごとに読み込ませるCSSを変えることができます。 1つのCSSの中にまとめるので、ページ読み込み高速化に繋がります。 例: /* 768px */ @media screen and (min-width: 768px){ #content{ text-align…