WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

Photoshop

Photoshopによるスライスとコーディング

既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。 作業手順 1. 既存のサイトのキャプチャーを撮る 2. Photoshopで開き、各画像…

作業効率が劇的に上がる! ショートカットキー早見表

作業効率を上げる為にはショートカットキーを覚える事が非常に大事です。 ただ、よく使うショートカットキーは自然と覚えるものの、普段余り使わない物は忘れがちです。その都度調べていてはそれこそ時間のムダになってしまうので、こういった早見表をPCの隣…

バナーの制作

Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合も…

動きのあるバナー

バナーのサイズを決める 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。…

クリッピングマスクとレイヤーマスク

画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分ける…

文字ツールの使い方-Photoshop

文字ツールを使う 文字入力(配置したい位置ではなく、別の開いているスペースで入力する) 入力後、移動ツールで配置したい位置に置く 見出しを書く時はクリックして文字を書き始める 段落文を書きたい場合はドラッグで段落文の範囲を決める(禁則処理を「…

Photoshopで画像を水彩画風にする

Photoshop cs6、ccの場合 yachin29.html.xdomain.jp/gauWatercolor.zip photoshop cs5 yachin29.html.xdomain.jp/gauWatercolor_CS5.zip

グラデーションツールでボタン作成

グラデーションツールを使う前に、なぜわざわざグラデーションツールを使って色を塗るのかを理解しましょう。 グラデーション=光と影 ディスプレイという平面の世界に、立体感や質感を出すために光の当たっている部分とそうでない部分(影の部分)をグラデ…

GIFアニメーション

GIFアニメーション(ジフアニメーション、GIF animation)は、Graphics Interchange Format (GIF) の「マルチイメージ」を使ったアニメーション。アニメーションGIF (animated GIF) ともいう。 一時はFlashや動画に取って変わられ見る事も少なくなりましたが…

バナーの制作

バナーの制作 既存のバナーをモデルにし、バナー画像を作成する。 画像素材 http://yachin29.html.xdomain.jp/banner.zip バナーデザインアーカイブ|バナーのデザインをまとめてチェック!banner.keizine.net ローソンフレッシュのバナー 素材食材・料理や…