-
ホームページ制作 Photoshopで簡単ポラロイド風イメージ
このブログでも使っている↑ポラロイド風のイメージ。
ホームページ制作で使い回せるポラロイド風の画像を
Photoshopを使って、所要時間2〜3分でサクっと作る方法のご紹介です。
【制作環境】
Photoshopバージョン：CS3
OS : OSX 10.5（Leopard)
※ Windowsをお使いの方は
文中の「commond」を「ctrl」に置き換えてお読みくださいね。
新規ファイルに写真を「レイヤー1」として配置します。
レイヤーパレットの「新規レイヤーを作成」をクリックして
「レイヤー2」を作成します。
ツールボックスから「長方形選択ツール(M)」を選んで
ドラッグしながら 写真の周りを好みのサイズに適当に選択します。
レイヤー2を選択した状態で、ツールボックスの背景色を白にして
「commond + delete」 をクリックします。
「レイヤー2」が白で塗りつぶされました。
レイヤーパレットの「背景」の目玉をクリックして背景を非表示にすると
「レイヤー2」が白で塗りつぶされたことが確認できます。
>ツールボックスから「移動ツール(V)」を選び、
レイヤーパレット上で 「commond」 を押しながら
「レイヤー1」と「レイヤー2」をクリックして両方選択します。
オプションバーの「水平方向中央揃え」をクリックして
レイヤーをセンタリングに整列させます。
ポラロイド風にしたいので「レイヤー1」の位置は上寄りにしておきます。
レイヤーパレットの「レイヤー効果」の中から「境界線」を選択してクリックします。
サイズ：1px、
位置：内側、
カラー：#cccccc
としたら「OK」を押します。
「レイヤー2」に薄いグレーのラインができました。
「レイヤー2」の上で 「commond」 を押しながらクリック。
「レイヤー2」の選択範囲を選択します。
次に「レイヤー2」の下に、新規「レイヤー3」を作成し、黒色で塗りつぶします。
最後に 「commond + d」 で選択範囲を解除します。
黒く塗りつぶした「レイヤー3」を選択した状態で
フィルタ＞ぼかし（ガウス）をクリックします。
半径を4.0にして「OK」をクリック。
数字を大きくすると、大きくぼやけます。
背景レイヤーを表示して確認すると、このような影が出来ています。
次は黒く塗りつぶした「レイヤー3」を右回りに回転させます。
「レイヤー3」を選択して「commomd + t」を押すと、バウンテンボックスが表示されるので、オプションバーの「回転」に「3.0」と入力して、Enterを押します。
「長方形選択ツール(M)」で図の点線で囲まれた部分を選択して
「delete」ボタンを押します。
はい、できあがり。
ポラロイド風イメージの完成です。
あとは好みで「不透明度」を調整したり、文字を載せたりします。
Photoshop の全機能を使い倒すのは難しいかもしれませんが、
このように一部の機能を使えるだけでも、こんな画像が作れちゃいます。
ホームページ制作の際に画像作成でお困りの方は、
ぜひお試しくださいね！(^-^)ノ
2009/06/25
-
Webデザイン3種の神器
私にとっての3種の神器といえば、絶対コレ！
(1) Adobe Photoshop
(2) Adobe Dreamweaver
(3) モリサワフォント「新ゴファミリー」
Adobe Photoshop
世界中のデザイナーが、みんなコレを使っている
世界水準の画像編集ソフトです。
写真を加工するための様々な機能があります。
このアプリは多機能であるがゆえ、ツールパレットがたくさんあり、
小さなモニタでPhotoshopを立ち上げると、
画面のほとんどがツールパレットで埋まってしまいます。
最低でも 1680 x 1050 ピクセル以上のモニタが必要です。
デュアルモニタ（2台構成）にすれば、
1台目のモニタを実際のグラフィックを制作する領域に、
2台目のモニタをパレット群の置き場所にすると、
快適にサクサクとお仕事がはかどります。
Adobe Dreamweaver
値段の安さからでしょうか、素人の方には「ホームページビルダー 」が有名ですが、
Web制作のプロは、みんなコレを使ってhtmlを作成しています。
このように画面上部には、ソースコードを
画面下部は、デザインビューを表示させながら作業を行います。
htmlやcssのスキルが無い方でも、Microsoft Wordのような感覚で
htmlを作成することもできます。
よく使うタグを登録できる「スニペット機能」、
サイト全体のファイルの管理できる「サイト管理機能」など、
このアプリの機能を見事に使いこなせれば
htmlコーディングの手間と時間を大幅に軽減できるようになります。
モリサワフォント「新ゴファミリー」
素人の方は、あまり重要視してくださいませんが…
フォント（書体）は、デザインに大きな影響を与える重要な要素です。
なかでも、このモリサワフォント「新ゴファミリー」は本当に優れた書体です。
いくらステキなデザインを作ったとしても、
仕上げに載せる文字のフォントがダサかったら、
出来上がりはダサくなってしまうからです。
13万円もするこのフォントですが、
もし私がお金の無い駆け出しのデザイナーだったとしたら
借金してでも、絶対に買いますね。
それでデザインのクオリティが上がるのなら安い投資ですYO!
(まだ評価されていません)
Loading ...CATEGORY : CSS , Dreamweaver , Photoshop , Web制作の現場 , ホームページ制作
TAG : Dreamweaver , Photoshop
2009/01/08
-
Photoshopアイデア&テクニックBOOK
古くからの友人、株式会社D.P.EYE の 中沢社長 さんが著書を出しました。
Photoshopアイデア&テクニックBOOK
って、えええええ！
まだ Photoshop 使えるんだ？！(◎_◎;)
クチコミプロモーション事業「B-Promotion」 を立ち上げたり、
群馬初のプロ野球「群馬ダイヤモンドペガサス」 をプロデュースしてみたり、
いろんなことしてるから、もうデザインなんて
ぜーーーーったいに出来ないと思ってたのに…。
「誌面に書かれている操作方法をマネるだけで、
ハイクオリティな素材を作ることができます。
操作のポイントになる部分は画面を多めに見せ、
メニューをたどる程度の簡単な操作は画面を省略するなどして、
誰もがスムーズに作品を作ることができるように配慮しています。
これらの素材はWebデザインの制作場面で利用されることが多いため、
主にWebデザイナーを想定して作り方(解像度や色など)を紹介しています。
ある程度Photoshopを使いこなすことはできるが、
本格的なプロレベルの素材を作るまでには至っていない中級者を読者対象としています。 」
だそうなので、「プロレベルの素材を作るまでに至っている」
あたしには不要な一冊だったのですが、Amaozでポチっとお買い上げ。
ほほー、確かに持ちネタほとんどゲロしたと思われる程、
Photoshopを使いこなすためのネタが満載ですね。
こりゃ、使わせてもらえるわ。（笑）
まー、あたしが一番驚いたのは
アンタの家族の写真がフツウに教材写真として
紙面で使われてたことだけどね？（笑）2008/05/11
