今日はPhotoshopを使用したメニューボタンの作り方をご紹介です。
まず横のガイド線を1本入れます。
その後新規レイヤーを1枚作成し、ガイドに重なる位置に[長方形選択ツール]で
適当な大きさ範囲選択を作りお好きな色で塗りつぶしをかけます。 
[選択範囲]メニュー→[選択範囲を変更]→[滑らかに]で3pxかけた後
Shift+Ctrl+Iキーで範囲選択を反転し、Deleteキーで背面を削除します。
角が取れた丸みのある四角が出来ます。 

Continue reading...

こんにちは。
もうすぐ2008年も終わりです。今年はどんな年でしたか？
そして年末と言えばお歳暮の季節です。
何度かお送りしているＴＯＫＹＵ(東急)催し物情報ですが、
今回はお歳暮コーナー開設のお知らせです。

とはいっても売り場に足を運んだわけではありません。
渋谷東口ＴＯＫＹＵ出口前に展示されたこのポスターに
思わず目が行ってしまったのでＵＰしました。
黒を基調とした日本風の上品なデザインですね。
ＴＯＫＹＵシリーズは最寄りということありますので
また機会がありましたらご紹介したいと思っています。
デザイナー/INOUE

Continue reading...

こんにちは。
少し前に渋谷駅で見かけたちょっと面白いポスターをご紹介したいと思います。
アルミ缶のロゴが集まってゴミ箱に詰め込まれているという下記のポスター、
 
10月から渋谷区のゴミ分別が大幅に変わったのでその告知です。
今までは燃えるゴミと燃えないゴミに分けるくらいで良かったのですが、
この度の改正で「可燃物」「不燃物」「ペットボトル」「缶」「ビン」
とかなり細かく仕分けしなくてはいけなくなったので大変です。。。
ただし在住してる横浜市はもっと細かくて厳しいんですよ。
（ペットボトルの蓋は本体とは別に捨てる、汚れたプラ容器は洗って出さなくてはいけない、とか）
それに比べれば・・・それに環境保全のため、不平ばかり言ってはいけませんね（＾＾；）
皆様もゴミの仕分けはきちんと行ないましょう！
デザイナー/INOUE

Continue reading...

渋谷のあちらこちらでこの広告見ませんか？
マンダム【 LUCIDO-L （ルシード-エル）】木村カエラさん街頭ポスターです。
広告は数パターンありますがこちらは渋谷ハチ公口の横長バージョン。
 
これを見て気になったのは髪の毛がくしゃくしゃになったような
ロゴの作り方でした。
　　　　　　　　　↓

さっそく色々と試してみましたが・・・なかなか
これ、といった簡単な手法となるとむずかしいですね。
Photoshopで[文字マスクツール]を使い範囲選択後、
[作業用パス]を作成。[パス選択ツール]で地道に変形。
そして[ブラシを定義]で登録したブラシを使って
塗っていけばこのように近い形にはなりますが・・・。
こちらはかなり大雑把に作ってます。

ただこのポスター、今日取り外しされてしまいました。
これから行かれてももう見ていただけないのが残念です。。
作り方はもっといい方法があったらまた載せてみたいと思います。では。
デザイナー／INOUE

Continue reading...

今日はリストとCSSを使ってナビゲーション用のタブを作ってみます。
少々長くなりますので興味の無い方はスルーしてください（笑）
まず最初にxhtmlファイルを作成します。
<div>タグでナビゲーションのボックスを作りますが記述は以下のようになります。
***************************************************************************
<div id=”navi”>
 <ul>
 <li><a href=”#”>Home</a></li>
 <li><a href=”#”>Company</a></li>
 <li><a href=”#” class=”active”>Business</a></li>
 <li><a href=”#”>Careers</a></li>
 <li><a href=”#”>Information</a></li>
 </ul>
</div>
<div id=”main”>CSSでタブナビゲーションを作る</div>
***************************************************************************
ナビゲーション部分のボックスはID：navi　本文部分のボックスはID：mainとしました。
現在アクティブになっているページ（Business）のliはclass名：activeにしていますが
これは各ページごとに変わってきます。例えばHomeのページではHomeのliに
class=”active”を設定するわけです。
リンクはダミーリンクで#を入れていますが実際はリンク先のアドレスを入れてください。
ただしこれではリスト形式で以下のように文字が表示されるだけです。

Continue reading...