2008/1/22 (火)

WEBデザインの小技

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 11:31:48

ホームページのデザインは、PhotoShopを利用していますが、デザインとくにレイアウトを決めていくときに画像のサイズを意識します。

とくにWEB用の画像は、1pxのずれが許されません。
しかし、サイズぴったりの画像をつくることも意外と神経をつかうところです。:cat_6:

その作業を楽にしてれる小技を紹介します。

ガイド機能です。
ガイド機能は、「ビュー」メニューより「定規」を表示し、表示された「定規」の上からドラックすることでガイドを表示させることができます。

WEBデザインをするなら「環境設定」で定規の単位をピクセルに変えることをお忘れなく:hand:

また、定規は、shiftキーを押しながらだと、5pxずつ動いてくれるので200×50などのピッタリサイズを作成するのに役立ちます。

また、「ビュー」メニューの「スナップ先」の設定次第で画像をガイドの位置に合わせることもできるのでレイアウトを決める際に役立ちますよLetters from a Killer movie download

Windtalkers film Where the Heart Is movie

Girl, Interrupted move City of Joy film

Synecdoche, New York full movie

簡単にキレイなバナーをつくるならこれ!!

カテゴリー: コンテンツ作成の裏ワザ — atsushi @ 10:04:43

バナー制作時に困るのが88×31(Micro Bar)という企画のサイズです。

サイズが小さいので画像を作るにも苦労します。:orooro:

そんなバナー作りに最適なサイトをご紹介します。

無料バナー作成工房
http://www.bannerkoubou.com/

このサイトは「完全無料」「商用OK」「登録不要」「報告不要」で1500種類以上のバナー素材を提供しています。:hakusyu: American Pie Presents Band Camp film

Were the World Mine video The Art of Being Straight movie

フリーの素材ってデザイン的にいいものってあまりないんですが、こちらの素材は、種類も多く、デザインも豊富で使いやすいかなって思ってます。

このサイトの一番すごいところは、グラフィックソフトを使わずにブラウザ上で自分の好きな写真をつかってバナーが簡単につくれてしまうところです。:crown:
パソコンに保存してある好きな画像を選択すると、切り取り枠が出て、88×31のサイズでトリミングし、その中に入れる文字を入力し、色やフォントを指定するという流れになっています。

文字入力時の色の選択、選べるフォントの種類が増えるともっと使いやすくなるかもしれません

バナー作りの参考にしてみてはいかがでしょうか?:sayonara:Marple: The Body in the Library the movieGlory hd

ロゴマークとグラフィティー

カテゴリー: 日記(ホームページ制作会社の雑談) — atsushi @ 9:55:40

ロゴマークのデザインって難しいですよね。8O

私も何度かロゴマークのデザインをした経験がありますが、企業イメージをいかに表現できるか?でかなり悩みました。

特に私が、すきなロゴデザインは、文字を変形させたり、つなげたりするものです。というのも昔、グラフィティー(壁とかに書いてある落書きみたいなやつ)にハマっていた時期があったからです。(壁には書いてないです。犯罪ですから…)

壁に自由に描くグラフィティーとある程度の制限の中でデザインするロゴマークでは、難しさは違うけれどなんとなく共通点を感じたりします。

グラフィティーは、落書きとかたづけられてしまいがちだが、かなり芸術性の高いものもあります。
プロのグラフィティーライターもいます。

私も影響を受けたプロのグラフィティーライターKazzRockさんという方がいます。:o
KAZZROCK GRAFFITI SITE http://www.kazzrock.com/

このサイトを見るとグラフィティーの芸術性の高さがわかると思います。

授業中に机や、ノートにたくさん書いていたあの頃の熱意を思い出してこれからのデザインに活かしていこうかな!!:ganba:

グラフィックソフトが無くても背景画像が作れるサイト

カテゴリー: 日記(ホームページ制作会社の雑談) — atsushi @ 9:42:48

ホームページの背景が簡単に作れるサイトを紹介します!

:hand:Background Image Maker
http://lab.rails2u.com/bgmaker/

使い方としては、ページ左側の設定項目を任意に設定し、左下にある「Make」ボタンを押すだけのシンプルなつくりです。

「Make」ボタンを押すと右上のURLが生成されるのでそのURLを開き画像を保存をすればOKです。

ストライプ・スラッシュなどラインパターンも選べ、色もカラースライダーを動かすだけで好きな色が作れちゃいます。

PhotoShopで同じものを作ろうとするとパターンを登録しておかなければならないのでこのサイトで作ったほうが速いかもしれません。

背景をどんな画像にしようか迷った時に試してみてはいかがですか?