横浜のホームページ制作スタジオFIXの社長ブログ » Photoshop

所要時間10分、Photoshopで作る飛び出たド派手文字

admin — Fri, 29 Jan 2010 03:19:15 +0000

このような飛び出た文字をIllustratorで作る場合、
「FILTERiT」というプラグインを使えば30秒で出来ちゃうんですが、
このために2万円以上もするプラグインを購入するのはもったいない。

そこで、Photoshopを使って所要時間10分で作る
飛び出たド派手文字チュートリアルです。
ネットショップのバナー作成などに重宝する小技ですYO!（・∀・）

Photoshopで縦500×縦500ピクセルの新規ファイルを作成します。

描画色を黒にして「ポイント10倍キャンペーン」と
テキストレイヤーを作成するのですが、この時
・ポイント
・10
・倍キャンペーン
は、それぞれ別のレイヤーにします。

サンプルではメリハリ感を出すために、
「10」の書体を変えフォントサイズを大きくしています。
この時のポイントは、ウェイトの太い書体を使うこと。

ここでは、「ポイント」「倍キャンペーン」に新ゴU（35pt）、
「10」に小塚ゴシックH（80pt）を使用しています。

レイヤーパレットで「ポイント」レイヤーを選択して
レイヤー効果＞グラデーションオーバーレイ…をクリックします。

上図のようにグラデーションを設定します。
描画モード：通常
不透明度：100％
グラデーション：#edd002〜#fffe7e
スタイル：線形
角度：90度

次に境界線を上図のように設定します。
サイズ：4px
位置：外側
描画モード：通常
不透明度：100％
塗りつぶしタイプ：カラー
カラー：#e60013

「ポイント」という文字がこうなります。

「10」、「倍キャンペーン」レイヤーも同様のレイヤースタイルを適用します。
これだけで十分な気がしてきましたが、もう一手間加えます。

この3つのレイヤーをグループ化して複製し、
元の「グループ1 のコピー」を不可視にします。
（目玉マークをクリックすると不可視になります）

「グループ1」を選択してグループを結合します。
レイヤーサムネールの上で
Macなら「Commond」、Windowsなら「Ctrl」を押したままクリックして
「グループ1」の選択範囲を選択します。

選択範囲＞選択範囲を変更＞拡張…＞拡張量を「6px」にします。

文字の周りに点線が表示されています。
選択範囲が文字より一回り大きくなりました。

「グループ1」の上に新規レイヤー「レイヤー1」を作成し、
描画色「黒」で塗り潰します。
「グループ1」レイヤーは不可視にしておきましょう。

ここで「グループ 1 のコピー」を可視化してから、
黒く塗りつぶした「レイヤー1」を上に5pxずらします。
なんとなく飛び出た感が出てきました！（・∀・）

黒く塗りつぶした「レイヤー1」を選択して
編集＞変形＞ゆがみ効果で
右上と左上のポイントをそれぞれ内側にドラッグして
台形っぽく変形させます。
ますます飛び出た感が増してきました！（・∀・）

最後に光をブラシで描き足せば、
とたんにネットショップのバナーらしくなりました！（・∀・）

グラデーションや、線の色、影の色を変えると
色々なバリエーションの飛び出た文字が作成できます。

Photoshopでも所用時間10分程度で、
こんなに簡単に飛び出た文字が作成できちゃうので、
ネットショップのバナー作成などに、ぜひお試しくださーい！(^-^)ノ

まぁ…私くらいになるとやっぱり面倒くさいので、
迷わず「FILTERiT」を使いますけどね！（笑）

WebデザイナーのためのOSX 復元計画(2) インストール編

admin — Wed, 19 Aug 2009 09:24:28 +0000

各種アプリの設定やMailデータのバックアップが済んだので
この際だからとついでに新調した 1.5TBのHDDにいよいよ、OSX再インストール。

またあるかもしれないこの事態に備えて
2回目以降がすごく楽になる Mac OS 再インストール : ☆ La Loopa ★☆☆
のナイスアイデアを参考に
「Leopard 完璧版」を作っておくことにしました。

1.5TBのHDDを3つのパテーションに分割
　　・1つ目のパテーション：いつでも初期化用 Leopard 完璧版 — 100GB
　　・2つ目のパテーション：Leopard 通常使用版 — 500GB
　　・3つ目のパテーション：データ保存用 — 800GB

こうしておいて…
普段は2つ目の「Leopard」を起動ディスクとして使用、
作ったデータは、3つ目の「Data Disk」に保存することに。
使いこんでいるうちにOSXの調子が悪くなってきたな〜と思ったら、
1つ目の「いつでも初期化用 Leopard 完璧版」を
普段使いの
2つ目の
HDDにペロリンチョと復元。

すると、OSXや各種アプリの再インストールを行わなくても
生まれたての快適サクサク状態へ。
大切なデータは3つ目の「Data Disk」に保存されているから
2つ目のHDDをフォーマットしちゃっても、全然OK!
なんて素晴らしいアイデア!!
☆ La Loopa ★☆☆ さん、貴方は天才です!!（・∀・）

━━━━━━━━━━━━━━━━━━━━━━━━━━━
●OSX 10.5をインストール
早速
1つ目のパテーション「Start Disk」に
OSX 10.5をインストール。
15分くらいで、インストール完了。
すぐにソフトウェアアップデートをかけて最新版に更新。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
次に、以下の絶対使うアプリケーションを同じく「Start Disk」にインストール。
・Adobe Photoshop CS3
・Adobe Illustrator CS3
・Adobe Dreamweaver CS3
・ATOK2006
・Firefox
・Jedit X
・Microsoft Office
・Transmit
・Adium
・プリンタドライバ
・フォント
※たま〜にしか使わないアプリはココではインストールしません。
━━━━━━━━━━━━━━━━━━━━━━━━━━━

そして各種アプリケーション＆フォントの設定
●Photoshop
バックアップしてあった
スウォッチ、カスタムシェイプ、パターン、ブラシ、スタイルを置き換え。

●Dreamweaver
バックアップしてあった
ユーザ＞ライブラリ＞Application Support＞Adobe＞Dreamweaver 9以下の「Configuration」フォルダを丸ごと上書き。

●Transmit
バックアップしてあった
ユーザ＞ライブラリ＞Preferences 以下の「com.panic.Transmit3.plist」
を上書き。

●Mail
バックアップしてあった
ユーザ＞ライブラリ以下の「com.apple.mail.plist」を上書き。
※ユーザ＞ライブラリ＞Mail＞Mailboxes のデータはまだ復元しない。

●フォント
バックアップしてあった「Font」フォルダを
ユーザ＞ライブラリ以下にフォルダごと丸ごと上書き。

●ATOK2006
ATOKパレット＞バックアップツール＞バックアップを復元する
「復元データの指定」で、バックアップしてあった「ATOK 2006 Backup Data」フォルダを指定。

●FireFox
ブックマーク＞ブックマークの管理＞復元＞ファイルを選択
で、バックアップしてあった「ブックマーク 2009-08-18.json」を選択。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
【あえて行わなかったこと】
・Mailを起動しない
・iTunes、iPhotoデータの移行はしない
━━━━━━━━━━━━━━━━━━━━━━━━━━━

OSXインストールから、ここまでの所要時間3時間くらい。
さすがにこの状態の OSXは、快適サクサクですYO!!（・∀・）

「よっしゃ！完璧！」だと思えたら…
最後に 2つ目のHDDに、この状態をコピペ（復元）します。

アプリケーション＞ユーティリティ＞ディスクユーティリティ
の「復元」で
ソース：1つ目のパテーション Leopard 完璧版用の「Start Disk」
復元先：2つ目のパテーション普段使い用の「Leopard」
「復元先を消去」にチェックを入れて「復元」を押すと
フォーマット＆丸ごとコピーが始まります。
これで、サクサク快適状態の「Start Disk」が丸ごと
2つ目のHDD「Leopard」にコピーされました。

最後に、普段使いは2つ目のHDDにしたいので、
システム環境設定＞起動ディスク
で、2つ目のパテーション「Leopard」を選択して再起動すればOK！

WebデザイナーのためのOSX 復元計画(1) バックアップ編

admin — Tue, 18 Aug 2009 09:22:11 +0000

そんなこんなで急遽、OSX復元計画を実行するハメになったのですが
その途中で、大変な事態に気がついてしまいました。

この状態で Timemachine から復元すると、
当然、変な挙動まで復元されちゃうんですね!!
それぢゃまるで意味がないので、
結局 OSX再インストールを選択するしかありません…。orz　

ということで、バックアップ開始。
貴重なデータは日頃から複数のHDDにバックアップを取っているので
特に問題は無いのですが、厄介なのは各種アプリの設定やMail。

【Photoshop】
スウォッチパレットの右上をクリックして「スウォッチを保存」する。
同様の手順で、カスタムシェイプ、パターン、ブラシ、スタイルもバックアップ。
これが引き継げなかったら、たぶん死にたくなる。

【Dreamweaver】
ユーザ＞ライブラリ＞Application Support＞Adobe＞Dreamweaver 9以下の「Configuration」フォルダを丸ごとバックアップ。
【iTune】
ユーザ＞ミュージック＞iTunes以下のデータをバックアップ。
しなかったところで、後から iPodから同期できるので良し。

【iPhoto】
ユーザ＞ピクチャ＞iPhoto Library以下のデータをバックアップ。
子供達の写真が無くなったら、死んでも死にきれないので慎重に。

【Transmit】
ユーザ＞ライブラリ＞Preferences 以下の
「com.panic.Transmit3.plist」をバックアップ。
複数のサーバを管理していても、バックアップはこのファイル1つでOK。

【Mailアカウント】
十数個のメールを受信しているので、ひとつづつ
アカウントを作り直すなんてことはやっていられない！
ユーザ＞ライブラリ＞Preferences 以下の「com.apple.mail.plist」をバックアップ。
これで面倒なアカウントの設定はしなくてOK。
署名（シグネイチャー）は、ユーザ＞Mail＞Signatures以下にあるhtmlファイル。

【Mailメッセージ】
ユーザ＞ライブラリ以下の「Mail」フォルダを丸ごとバックアップ。
6GBもありました…。
この方法だと、後から権限の設定で苦労する可能性大ですが、
その時は「chown -R」コマンドを叩いて対応しちゃうつもり。

【フォント】
ユーザ＞ライブラリ以下の「Font」フォルダを丸ごとバックアップ。

【ATOK2006】
ATOKパレット＞バックアップツール＞データのバックアップをとる
「すべてのデータを保存する」にチェックを入れてバックアップを作成すると
「ATOK 2006 Backup Data」というフォルダが生成されるのでこれを保存。
このフォルダの名前を変更しちゃうと復元できなくなるので
フォルダの名前は変更しない。

【FireFox】
ブックマーク＞ブックマークの管理＞バックアップ
保存ファイル形式：JSONとすると「ブックマーク 2009-08-18.json」
のようなバックアップファイルが生成されるので、これを保存。

━━━━━━━━━━━━━━━━━━━━━━━━━━━
いざとなったらT起動
━━━━━━━━━━━━━━━━━━━━━━━━━━━
幸いなことに私の場合、余っているG5があるので…
データの詰まったHDDを余っているG5に挿して、
メインマシンの Intel MacとFirewire接続。

「T」を押しながらG5をターゲットディスクモードで起動すれば、
Intel Macから、G5を外付HDDのように扱えるので
抜き忘れたデータがあっても後から抽出することができるため、
バックアップはこの程度にしておきました。

CSSでポラロイド風画像

admin — Wed, 05 Aug 2009 02:10:47 +0000

Photoshopで簡単ポラロイド風イメージの作り方を先日ご案内しましたが、
ホームページ上にたくさんの画像を掲載したい場合、
いちいちこんな方法で画像作成していたら、手間がかかってしまいますよね。
そのような場合は、CSSでコントロールしちゃうのが簡単です。

■元の写真のサイズが横400×縦300ピクセルの場合

緑色の部分が、横400×縦300ピクセルです。
その回りに、枠と影の領域が加わりますので、
画像全体のサイズは、元の写真のサイズより一回り大きい
横410×縦325ピクセルになります。

■CSS (スタイルシート) の書き方

img.shadow { background: url(bg_photo.gif) no-repeat; padding: 5px 5px 15px 5px;}

■htmlの書き方

shadow" />

要するに、元の写真の下に背景画像を敷くことで
ポラロイド風に見えちゃうというわけです。

■元の写真

この写真にCSSで背景画像をくっつけると…

この方法なら、ホームページに大量の写真を配置したい場合でも
imgタグ部分に、class=を指定するだけで済むので簡単ですね。（・∀・）

この方法で使用した背景画像は、以下からご自由にご利用ください。
画像をダウンロード
ホームページ制作時にぜひお試しくださ〜い。(^-^)ノ

ホームページ制作 Photoshopで簡単ポラロイド風イメージ

admin — Thu, 25 Jun 2009 07:56:22 +0000

このブログでも使っている↑ポラロイド風のイメージ。
ホームページ制作で使い回せるポラロイド風の画像を
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 の全機能を使い倒すのは難しいかもしれませんが、
このように一部の機能を使えるだけでも、こんな画像が作れちゃいます。

ホームページ制作の際に画像作成でお困りの方は、
ぜひお試しくださいね！(^-^)ノ

無料ホームページ素材 Web-Stylish!

admin — Sat, 31 Jan 2009 15:47:11 +0000

横浜のホームページ制作会社スタジオFIX では、
無料でホームページ素材がダウンロードできるサービスをご提供しています。

プロのWebデザイナーだからご提供できるハイクオリティなホームページ素材が全て無料！
ホームページオーナー様のための「本当に使える」Web素材無料ダウンロードサービス Web-Stylish!

Web-Stylish! では、
ボタン素材や、フレーム用素材、ホームページ用背景画像など
現在4,708点のホームページ素材を無料でご提供しています。

「カートに入れる」、「ごあいさつ」など
ネットショップや、企業ホームページで実用的にご利用いただけるボタン素材や、
ブログのカラムデザインにご利用いただける
フレーム用素材など、実用的でハイクオリティなホームページ素材がた〜くさん。

しかも、ぜーーーんぶ無料でご利用いただけます。(^-^)
ホームページ素材をお探しの方は、ぜひチェックしてみてくださいね。

Webデザイン3種の神器

admin — Thu, 08 Jan 2009 03:53:28 +0000

私にとっての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!

Photoshopアイデア&テクニックBOOK

admin — Sun, 11 May 2008 12:06:40 +0000

古くからの友人、株式会社D.P.EYE の中沢社長さんが著書を出しました。
Photoshopアイデア&テクニックBOOK

って、えええええ！
まだ Photoshop 使えるんだ？！(◎_◎;)

クチコミプロモーション事業「B-Promotion」を立ち上げたり、
群馬初のプロ野球「群馬ダイヤモンドペガサス」をプロデュースしてみたり、
いろんなことしてるから、もうデザインなんて
ぜーーーーったいに出来ないと思ってたのに…。

「誌面に書かれている操作方法をマネるだけで、
ハイクオリティな素材を作ることができます。
操作のポイントになる部分は画面を多めに見せ、
メニューをたどる程度の簡単な操作は画面を省略するなどして、
誰もがスムーズに作品を作ることができるように配慮しています。
これらの素材はWebデザインの制作場面で利用されることが多いため、
主にWebデザイナーを想定して作り方(解像度や色など)を紹介しています。
ある程度Photoshopを使いこなすことはできるが、
本格的なプロレベルの素材を作るまでには至っていない中級者を読者対象としています。」

だそうなので、「プロレベルの素材を作るまでに至っている」
あたしには不要な一冊だったのですが、Amaozでポチっとお買い上げ。

ほほー、確かに持ちネタほとんどゲロしたと思われる程、
Photoshopを使いこなすためのネタが満載ですね。
こりゃ、使わせてもらえるわ。（笑）

まー、あたしが一番驚いたのは
アンタの家族の写真がフツウに教材写真として
紙面で使われてたことだけどね？（笑）

横浜のホームページ制作 スタジオFIXの社長ブログ » Photoshop