webデザイナー学習記録帳

webデザインやwebに関する学んだことの学習記録帳です

バナー演習1

今回は、

こちらの記事で(→過去記事参照)演習したものを

フォトショップの使い方を覚えるために

フリー素材を使用して

自分で、演習してみました

 

↓ ↓ ↓

f:id:lovedeluxe5914smh:20151103163841j:plain

 

f:id:lovedeluxe5914smh:20151103163853j:plain

(↑ 余白の使い方に迷いが。。)

(今回は、ツールの使い方(マスク+グラデーション)に重点をおいて復習ですので、これでよしとします)

 

 

今回、分かった事は、丁度いい写真素材がないと

切り抜いたりしなくては、いけないという事です

(フォトショのものさしツールを使って傾きを整えてもよかったかも!)

 

 

 

バナー作成【Illustrator編】

今回の動画はこちら

↓ ↓ ↓

Illustrator基本操作入門 -バナー編- まきの ゆみ 先生 - 無料動画学習|schoo(スクー)

 

まきのゆみ先生のIllustratorを使用したバナー作成の動画です

まきの先生の動画は、何か作品を作る過程でツールの使い方を覚える

というスタンスのようで動画を見終わった後には、作品が出来上がります!

 

【動画のポイント】

パターンの作り方

(バナーの背景になる画像を4種類作成します

 ギンガムチェック、ストライプ、クローバー、水玉模様)

【感想】

パターンは、作ったことがありましたが、とても解説が詳しくて

色々な、イラレの機能を駆使して今回も小技が満載でした!

 

以下この動画の私が作成した演習バナーです

↓ ↓ ↓

ギンガムチェック背景

f:id:lovedeluxe5914smh:20151101231355g:plain

ストライプ背景

f:id:lovedeluxe5914smh:20151101231409g:plain

クローバー背景

f:id:lovedeluxe5914smh:20151101231425g:plain

水玉模様背景

f:id:lovedeluxe5914smh:20151101231439g:plain

 

 

バナー作成 Photoshop編

今回の動画はこちら↓です!

つくりながら楽しくマスターPhotoshop実践特訓【バナー編】 まきの ゆみ 先生 - 無料動画学習|schoo(スクー)

 

今回の動画では、スイーツのバナーと和風のお菓子のバナーを作成するという

動画でした!

 

【主なポイント】

  • 写真の上の文字を見やすくするために「境界線調整」
  • 「チーズとベリーのタルト」部分の下の長方形を透明度を調整した透明にした

その他、背景レイヤーで整列することなど

まきのゆみ先生のテクが満載でした!

 

 

私が、演習したバナーです!

↓ ↓ ↓

f:id:lovedeluxe5914smh:20151101171418j:plain

自分で少し アレンジ済みです☆(⌒▽⌒)

 

f:id:lovedeluxe5914smh:20151101171511j:plain

 

こちらの周りの黄色い部分は、シェイプレイヤーの四角を

切り抜きを使って表現、また色も栗の色からスポイトするなど

細かな小技がたくさんありました!

 

htmlが嫌いにならない正しい構文【css編】を視聴

今日みた動画はこちら↓

Webデザインを始めたい方に贈る、「HTMLが嫌いにならない正しい構文」必要スキル【CSS編】 田中 晶子 先生 - 無料動画学習|schoo(スクー)

 

 

【勉強になった点】

私のブログのサイト制作仕様書からコーディング - webデザイナー学習記録帳からの続き記事です

 

今日みた動画は、これです↓

Webデザインを始めたい方に贈る、「HTMLとCSSって何」【概要理解とツール導入】 田中 晶子 先生 - 無料動画学習|schoo(スクー)

 

【勉強になった点】

  • DWのスタイルシートの新規作成方法とリンク方法(ファイル→新規作成と右クリックのショートカットメニューからリンクできる)
  • 作成したワイヤーフレームを背景に表示させてコーディングしていく手法

 

 

サイト制作仕様書からコーディング

スクーにあるwebサイトの作成の動画を順に演習していっています

  1. ワイヤーフレーム作成 - webデザイナー学習記録帳
  2. ワイヤーフレームにピクセル数を書き込む - webデザイナー学習記録帳
  3. ワイヤーフレームにクラス名などを書き込む - webデザイナー学習記録帳

さらに、シーリズは変わりますが、

↓こちらの動画が続きです

Webデザインを始めたい方に贈る、「HTMLとCSSって何」【概要理解とツール導入】 田中 晶子 先生 - 無料動画学習|schoo(スクー)

 

ワイヤーフレームが完成したらDW(ドリームウィーバー)でコーディングしていくわけですが、その前に

 

ワイヤーフレームの時の動画で作ったサイト制作仕様書がクラス名などが

足されていたので、私も足しました↓

f:id:lovedeluxe5914smh:20151028174249p:plain

 

このようなシンプルなサイトでも、コーディング時に困らないように

かなり細かく指示を書いていかなくてはなりません。

 

今は、まだ真似ですが

私がコーダーだったらどうやったら、コーディングしやすいかななど

思ったりしました

そして、ピクセル記入の方も何箇所か変更されているようだったので

これも、真似てみました

f:id:lovedeluxe5914smh:20151028193339p:plain