Dearps ～Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです～ » Web Design http://dearps.lovwar.com Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです。グラフィック、DTP、WEB、映像…様々な場面で活用できるテクニックを紹介していきます。 Sat, 22 May 2010 10:32:46 +0000 http://wordpress.org/?v=2.8 ja hourly 1 Adobe Flash Catalyst　β版がAdobe Labで公開 http://dearps.lovwar.com/2009/06/flc/ http://dearps.lovwar.com/2009/06/flc/#comments Thu, 25 Jun 2009 22:01:45 +0000 R2O.SNW http://dearps.lovwar.com/?p=656 top

PhotoshopでおこしたデザインがそのままFlexアプリのRIAに変換できるということで話題のAdobe Flash CatalystのパブリックベータがAdobe Labで公開されました。試したい方は以下リンクから。なお、CS4のPSDデータしかサポートされていないっぽいのでCS4もっていないかたはこちらのデータをご自由にお使いください。

Adobe Flash Catalyst　β(Adobe Lab)

簡単な説明はこちらから。(Adobe Edge)

関連する投稿

]]> http://dearps.lovwar.com/2009/06/flc/feed/ 0 お引っ越ししてきました。当サイトデザインカンプPSD配布あり http://dearps.lovwar.com/2009/06/start/ http://dearps.lovwar.com/2009/06/start/#comments Fri, 19 Jun 2009 13:00:21 +0000 R2O.SNW http://dearps.lovwar.com/?p=542 top

今までLovwar’s Design Noteというブログを運営しておりましたがPhotoshopネタやら趣味のスプレーアートやらなんやらでごっちゃになってたんでこのサイト“Dearps”を立ち上げPhotoshopネタはこちらにしぼって紹介していくことにしました。

実務に活用できるようなPhotoshopのテクニックをどんどん紹介していこうと思っているのでよろしくお願いいたします。

引っ越し記念にこのサイトのデザインカンプをダウンロードできるようにしました。
海外の方のカンプは観る機会はあっても日本人の方のカンプってあまりみる機会ってないですよね。私のでよろしければこの機会に覗いてみてください。

私のデザイン方法の特徴はレイヤーカンプを利用してページとスライス用のレイアウトをわけるところ(今回はトップとスライス用2つのみ)と、独自の方法でスライスをオブジェクトとして管理しているところです。
カンプ制作の流れについては今度詳しく紹介したいと思います。

当サイトのデザインカンプPSDのダウンロードは以下から。

index.psd

関連する投稿

]]> http://dearps.lovwar.com/2009/06/start/feed/ 0 スライス作成テクニック http://dearps.lovwar.com/2008/12/slice1/ http://dearps.lovwar.com/2008/12/slice1/#comments Sun, 07 Dec 2008 04:09:05 +0000 R2O.SNW http://lovwar.com/blog/?p=203 スライス

レイヤーに基づく新規スライス

スライスを切る方法はスライスツールだけではありません。今回は知られているようで知られていない”レイヤーに基づく新規スライス”という機能を紹介します。

レイヤーパレットでスライスを切りたいパーツを選択し、［ レイヤー］メニューの［レイヤーに基づく新規スライス］を選択すると一瞬でそのレイヤーサイズに合わせたスライスが生成されます。
レイヤーを複数選んで実行してもOKです。

私は各パーツを「スマートオブジェクト」化して、最後にこの方法でスライスを切っています。

リピートする予定の背景画像やマスクを使用しているパーツは「ちょっと変わったスライス作成テクニック」の記事で紹介しているテクニックをご利用下さい。

関連する投稿

]]> http://dearps.lovwar.com/2008/12/slice1/feed/ 0 「スマートオブジェクト」活用法 http://dearps.lovwar.com/2008/12/smartobject/ http://dearps.lovwar.com/2008/12/smartobject/#comments Sun, 07 Dec 2008 03:41:49 +0000 R2O.SNW http://lovwar.com/blog/?p=196 画面

WEBサイトのナビゲーション等を作る際のスマートオブジェクト活用法

スマートオブジェクトというとPhotoshop 上で写真やIllustratorのベクトルデータなどのデータの画質を劣化させずに拡大縮小、変形、移動する機能としてしられています。
その機能に隠れてあまり知られていないようですが [スマートオブジェクト]でFlashやFireworksにあるようなシンボルとインスタンスの親子関係をもったパーツををつくることができます。
WEBサイトのナビゲーション等同じパーツが連続するものをデザインする際は[スマートオブジェクト]を活用することによってメンティナンス性が向上します。

【インスタンスの作り方】

(１)ナビパーツをデザイン
01
(２)完成したらレイヤーパレット上でナビを構成するすべてのレイヤーを選択し[レイヤー] メニューの [スマートオブジェクト］ ／［新規スマートオブジェクトに変換］を選択します。またはレイヤーパレットで右クリックで［新規スマートオブジェクトに変換］を選択する。
02
(３)これを親としてインスタンスを必要数複製します。
レイヤーを選択し [レイヤー] メニューの [レイヤーを複製] を選択します。
または、スマートオブジェクトのレイヤーを、[レイヤー] パレットの下部にある [新規レイヤーを作成] アイコンにドラッグかAltを押しながら複製でも可。
03
(４)これで複製されたスマートオブジェクトは１つに対して変更を加えると、複製された全てのスマートオブジェクトにも編集内容が反映されるようになります。

※[レイヤー] メニューの [スマートオブジェクト]/ [スマートオブジェクトを複製]を選択すると関係を切った独立したスマートオブジェクトとして複製することができます。

参考用にサンプルPSDデータを用意しましたので下記からどうぞ。
dl_actions.gif

関連する投稿

]]> http://dearps.lovwar.com/2008/12/smartobject/feed/ 0