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

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

このような飛び出た文字を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」を使いますけどね！（笑）

2010/01/29

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

各種アプリの設定や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！

2009/08/19

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

そんなこんなで急遽、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のように扱えるので
抜き忘れたデータがあっても後から抽出することができるため、
バックアップはこの程度にしておきました。

2009/08/18

CSSでポラロイド風画像

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


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

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


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

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

■htmlの書き方

1. <img src="001.jpg" width="400" height="300" class="shadow" />

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


■元の写真


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



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


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

2009/08/05

ホームページ制作 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