-
所要時間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デザイナーの道具術
30インチAppleシネマディスプレイを2台並べて
デュアルディスプレイにすると…
こーーーーんなに広大な作業領域を確保できます。
●左に配置しているモニタ
XGA（1024×768ピクセル）のノートパソコンの4画面以上の面積がありますので、
編集中のPSDファイルをドカーンと中央に配置できます。
複数のPSDファイルを開いても、ファイルの後ろにファイルが隠れないので
目的のファイルにすぐアクセスできます。
●右に配置しているモニタ
Photoshopのパレットをドカーンと開いてます。
さらに、Mail、GoogleTalk、Skypeなどの
コミュニケーション系のアプリも常時、この位置に立ち上がってます。
こうしておけばメールやメッセージが届いても
Photoshopで作業しながら、横目でチェックできます。
最近の Photoshop は、ワークスペースの設定ができるようになったので、
昔に比べるとずいぶん使いやすくはなりましたが、
それでもやはり小さいサイズのモニタでは、作業効率を望めません。
20インチ程度のモニタで Photoshopを使う場合、
・普段は小さく格納しておいて、使う時にパレットを表示させる
・パレットを開くためのショートカットを登録する
いずれかの方法を取ることになります。
グラフィックを作るときには、ただひたすらに
多くのツールと機能を使っては眺め、やり直しては眺め、戻っては眺め…
を繰り返します。
その都度、いちいち発生する「パレットを開くためのワンアクション」は
効率の悪さとストレスの原因になります。
もし明日から20インチでWebデザインを作れって言われたら…
私だったらたぶん、3倍以上の時間工数と疲れが発生しちゃうと思います。(^-^;)
私の起業理由の1つは、「最高の作業環境で仕事がしたい」ことでした。
ぶっちゃけ言葉で申し上げれば、
「最高の制作環境を与えくれれば、最高に稼いでみせまっせ！」
ということなのですが、
当時はまだハードウェアの価格も高かったし、
上司がデザイナー出身ではなかったとので
「パソコンに100万円ってあり得ないでしょ！」と理解いただけない状況にあったのですが、
たった100万円の投資で、作業効率が3倍になって
疲れが1/3になるのなら、費用対効果絶大だと思います。
「うちのWebデザイナー、デザインセンスはいいのに
仕事が遅くてあまり稼いでくれない…」とお悩みの社長さんがいたら、
制作環境を一度、見直してあげてみてはいかがですか？
モニタを買い換えてあげる or 買い足してあげるだけで、
新たなパフォーマンスを発揮してくれるかもしれません！2009/10/07
-
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！
(まだ評価されていません)
Loading ...CATEGORY : Dreamweaver , MacOSX , Photoshop , Tips , Web制作の現場
TAG : Dreamweaver , MacOSX , Photoshop
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のように扱えるので
抜き忘れたデータがあっても後から抽出することができるため、
バックアップはこの程度にしておきました。 (まだ評価されていません) Loading ...CATEGORY : Dreamweaver , MacOSX , Photoshop , Tips , Web制作の現場
TAG : Dreamweaver , MacOSX , Photoshop
2009/08/18
-
CSSでポラロイド風画像
Photoshopで簡単ポラロイド風イメージの作り方 を先日ご案内しましたが、
ホームページ上にたくさんの画像を掲載したい場合、
いちいち こんな方法 で画像作成していたら、手間がかかってしまいますよね。
そのような場合は、CSSでコントロールしちゃうのが簡単です。
■元の写真のサイズが横400×縦300ピクセルの場合
緑色の部分が、横400×縦300ピクセルです。
その回りに、枠と影の領域が加わりますので、
画像全体のサイズは、元の写真のサイズより一回り大きい
横410×縦325ピクセルになります。
■CSS (スタイルシート) の書き方
img.shadow {
background: url(bg_photo.gif) no-repeat;
padding: 5px 5px 15px 5px;}
■htmlの書き方
<img src="001.jpg" width="400" height="300" class="shadow" />
要するに、元の写真の下に背景画像を敷くことで
ポラロイド風に見えちゃうというわけです。
■元の写真
この写真にCSSで背景画像をくっつけると…
この方法なら、ホームページに大量の写真を配置したい場合でも
imgタグ部分に、class=を指定するだけで済むので簡単ですね。（・∀・）
この方法で使用した背景画像は、以下からご自由にご利用ください。
画像をダウンロード
ホームページ制作時にぜひお試しくださ〜い。(^-^)ノ2009/08/05
