スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

実践トレーニング(GU) 3 ヘッダーの作成

実践トレーニング(GU) 3 ヘッダーの作成

ヘッダーやフッターは決まっている事も多いと思うので
今回はGUで使われているデザインを再現いてきます。

20140129_1.jpg


白、グレー、黒のシンプルな色使いでマウスオーバー時は赤字になります。
このヘッダー作成時に気をつけた点は文字です。
文字が小さい為、どうしても潰れやすくなります。
文字が見えづらかったりぼやけてしまわない様に
Photoshopで作成してみました。











GUというロゴマークは一件シンプルに見えますが、同じ自体を見つけられませんでした。
自分のPCには対応フォントが入っていないのかもしれません。
似ているフォントを使用して作成しました。



これらを順番通りに並べていけば完成です。





スポンサーサイト

実践トレーニング(GU) 2 サイトの全体イメージを決める

まずサイトの全体イメージを決めて 記載する内容を固めていきます。

あくまで学習の為、元々あるデザインを使用する場合でも写真以外はすべて1から作成します
大まかな構成は以下の通りです。

ヘッダー  
  GUで使われているデザインを再現します。

イチオシ商品紹介画像
  パッと見て印象に残る様に大きく、季節感がわかるような画像を作成します。
  さらに今回はキャッチフレーズも入れてみます。
  
ジャンル別ニューアイテムの紹介
  女性向け、男性向け、キッズ向けの三種類でニューアイテムをピックアップし商品の紹介をします。
  今回は練習の為に見た目をジャンルごと変化させてみます。
  タブを使って切り替えられるようにします。

スタイリング一覧
  GUで使われているディスプレイ方法と同じもの再現します。
  →モデルが着用した時のイメージ画像をカルーセルパネルにて自動スライドさせます。
  →任意のタイミングでボタンを押すことで見たい画像まで移動する事を可能にします。

フッター
  GUで使われているデザインを再現します。


次回からは実際に作成した内容を紹介していこうと思います。




サイトを開いた際にメッセージを表示させる。Javascript


今回は実践の練習としてGUのサイトで服の素材をお借りして制作していきます。


ただ、本家のGUとは関係のないサイトになりますので、


制作したGUサイトのトップにメッセージにその説明を表示させます。


Javascriptを使用した基本中の基本であるメッセージ表示から。


alertを使用します。

<script>


 alert("メッセージ");

</script></span>

結果:メッセージ


メッセージを改行して2行に分けたい場合

alert("メッセージ¥n2行目のメッセージ");

結果: メッセージ
   2行目のメッセージ

   
   


改行コードである ¥n を入れる事で改行されます。


alertは計算もできます。

alert(1+3);

結果:4

デバッグ等の使用に最適です。

Photoshop レイヤーを他のキャンバスにコピーする。

作成したレイヤーで別のキャンバスにも使用したい場合
キャンバスをまたいでコピーする方法



1.コピーしたいレイヤーを選択。

2.「範囲選択」メニュー→「すべてを選択」を選択。

3.「編集」メニュー「コピー」を選択。

4.移動先のキャンバスを選択。

5.「編集」メニュー「ペースト」を選択。



これでコピーされてると思いますので、確認をする。

Photoshopで服画像を修復・復元する。

本日のテーマは商品画像の修正・復元です。

使用したい商品の画像があるが

もっと明度を上げたいとか、消したい物が写っている等

そのまま使うことができない場合が多々あると思います。

2014019_1.jpg

このような画像があります。

服の写真はGUのサイトからお借りました

服の左手部分に生地の写真が付いている事により

左手部分が全部写っていません。

右手同様に左手もすべて写したいとしましょう。

生地部分を消して右手の画像を左手部分に貼り付けて

合成画像を作ります。

完成図
2014019_1.jpg



1.服画像のコピー・反転

・服画像のレイヤーを選択。

・"レイヤーを複製"をしてもうひとつ服画像のレイヤーを作成。

・作成した服画像のレイヤーを選択しメニューの「編集」 - 「自由変形」を選択。

・画像を右クリック - 水平方向に反転 を選択

 反転した服画像ができました。


2014019_1.jpg



2.写真の合成

 
 元画像の生地画像を消しゴムツールで削除しておきます。

 反転してできた右袖部分を選択ツールで取得範囲を指定後

 移動ツールにて選択した部分を切り離し

 元画像の左袖にドロップします。



2014019_1.jpg
  
 不要になった反転画像は削除しておきます。

 
3.色をなじませる

別の画像を持ってきているので、貼り付けた際に画像の切れ目ができてしまいます。

シワの具合が不自然になるので画像をなじませます。

スポット修復ブラシツールを使い、不自然な色の違いを部分をクリックしながら

色をなじませていきます。

2014019_1.jpg

画像右が修正後ですが、、わかりづらいですね。

自分でもしっかりできているのか自信はないですが

自然なシワの感じになっていれば良いかと思います。



実践トレーニング(GU) 1 プロモーションサイトの仕様を決める。

今日から何回かにわたって実践を想定したトレーニングの内容を掲載していこうと思います!

企業から依頼がきたという設定で、いろんな詳細設定を決めてから
サイト制作をしようと思います。

あくまで実務経験がない今現在の知識で想像しながら作成しておりますので、
実際は違っているものも多々あるかと思います。
もしご指摘事項等ありましたら、些細なことでも構いませんので
ご指摘をお願いします。

■設定
企業からセール用のプロモーションサイト作成の依頼が来たという設定で
1ページ作成する。
商品等の画像やセールの価格を載せるが
商品の詳細はあくまで、詳細ページで確認するという設定で
このページからいろんなページへ飛んでいける
入口のサイトを作成するのが目的


あらかじめ決めておく詳細設定(依頼者との打ち合わせで詰めていく内容と想定)

※内容があくまで仮定です。

依頼者 
 ファッションブランドのGU

目的
 春物のセール

目標
 WEBでの売上を1日10件UPを目指す (前年比110%)

ターゲット
 20代~30代 男女

拡散方法
 リスティング広告
 メルマガ

タイミング
 3月限定
 3/15~3/31

テーマ
 3/15~3/31 期間限定

コンセプト
 春らしく明るくて清々しい気持ちさせる

さあ次回からいよいよ制作開始です!

dreamweaverCS6でタブを作成し記事を切り返る「タブ付きパネル」

タブ付きパネルの作成です。
タブをクリックするとページを移動せずにその部分だけ表示の切り替えができます。

dreamweaverを使用すればコードを打ち込む事なく簡単に作成ができます。

バージョンCCとCS6では選択する項目が異なります。
初心者の私としてはCCよりもCS6の方が編集等が簡単でわかりやすかった為
今回のみCS6で作成します。

余談ですが、
dreamweaverに関しては通常のライセンスを取得しCCを導入されている時点で
CS6も新規でダウンロード・インストールできるので使いやすい方で作成できる所が良いですね。
全体的にCS6の方が断然使いやすいと感じているのは自分だけでしょうか、、、。

話を戻して、では実際にCS6で作成していきます。

メニュー 「挿入パネル」- 「Spry」 - 「タブ付きパネル」

20140113.jpg


選択するとタブフォームが挿入されます。
ソースコードにタブ用のコードが挿入される他、以下2つのファイルが作成されます。
SpryTabbedPanels.js(JavaScript)
SpryTabbedPanels.css (CSS)
ファイルはSpryAssetsというフォルダが作成されその中に格納されます。
アップロードする際はこの二つのファイルも一緒に行うようにします。


文字サイズは、タブのサイズを変更する際はCSSスタイルからTabbedPanelsTabを選択し
通常通り設定を編集する事がでいますが、CSSファイルを直接編集する事も可能です。
直接CSSを確認しながら設定する方がわかりやすい場合はそれでも構いません。

20140113.jpg

タブ内の文字サイズ変更 .TabbedPanelsTab の font-size: 0.7em; → 1.0em;
選択中タブの背景を変更 .TabbedPanelsTabSelected { background-color: #DDD → #E88693
コンテンツ内容のサイズ .TabbedPanelsの width:やmargin:等で調整

設定例
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 80px;
margin: 0px 1px 0px 0px;
background-color: #E88693;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
}

.TabbedPanels {
overflow: hidden;
margin: 2px;
padding: 0px;
clear: none;
width: 996px;
}





画像ではありますが、作成したタブ付きパネルを載せておきます。
20140222_1.jpg

PhotoshopCCで操作の取り消しを何段階か前まで実行する

Photoshopの取り消し(メニュー-編集-取り消し)機能は
基本的にひとつ前の操作にしか適用できません。
MicrosoftのOfficeやIllustratorに慣れていると 「なぜできない?」
と疑問に感じますが、何段階か前の操作まで戻したい場合、
ヒストリーという機能を使用すれば何段階か前の操作に戻す事が可能です。

20140113.jpg

メニューのウィンドウからヒストリーにチェックをつけてヒストリーパレットを表示させます。
パレット内に行った操作の履歴が表示されるので、
戻したい時点の操作を選択すると戻るという仕組みです。

WEBサイトで使用されているカラーを取得する。

WEBサイト制作の勉強をしていると、

参考になりそうなサイトを探す事がよくあります。

そんな時に

このサイトのこの素材の色すごくいい!でも何色を使用しているのだろうか?

思う事があります。 

そんな時は、色を取得するアプリやサイトの色情報を取得します。

詳細は以下の以下の通り。


色の場所までカーソルをドラッグするだけで、色番号を表示してくれるアプリ
画面カラー取得プログラム
ダウンロードして展開するだけ。あとはexeを実行するだけでインストール不要です。
Windows8でも使用できます。

対象のURLを入力るとそのサイトのカラーを分析し、どの色がどれくらいの割合を占めているのか
%表示してくれるサイト
WEB COLOR DATA
サイト上で分析してくれるので、インストール・ダウンロード不要です。




PhotoshopCCでテキスト(文字)を中央揃えにする。

カンバスに対し、テキストなどの文字を中央揃え(センタリング)にする操作

blg_1.gif


まずテキストを選択し[Ctrl]+[A]ボタンを押し、カンバス全体が選択範囲になるようにします。

blg_2.jpg

続いて文字部分をセンタリングします。

縦位置の設定。
「レイヤー」→「レイヤーを選択範囲に整列」→「垂直方向中央」を選択します。
横位置の設定
「レイヤー」→「レイヤーを選択範囲に整列」→「水平方向中央」を選択します。

blg_3.jpg

これで、カンバスに対しセンタリングができました。

スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。