グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

Dreamweaverの「ブラウザでプレビュー」と「デザインビュー」の機能は
コーディング時の確認にとても役立つ機能ですが、
「サイトの管理」と合わせて使うことでさらに便利になります。

何のことかというと、サイトを設定することで
ルートパスが使われているサイトでもプレビューできる、ということです。


サイトの管理でサーバーの情報（URL接頭辞など）が正しく入っていると、
/（ルート階層）から始まるパスで書かれたファイルも
デザインビューの表示に反映させることができます。

さらに、環境設定から 「ブラウザでプレビュー」＞「一時ファイルを使用してプレビュー」にチェックを入れると、
「ブラウザでプレビュー」したとき一時的にサーバーにファイルが生成され、
実際にアップしたときの見え方を確認することができます。

※その際参照するファイルはサーバー上のものなので、
　画像やスタイルなど必要なファイルはアップする必要があります。


サイト管理の設定をするのは少し面倒かもしれませんが、
毎回 アップ → 確認 とするよりは随分楽になると思います。

Photoshopでデザインすると無数のレイヤーが生まれます。

いざ、画面上に見えているオブジェクト？（ではないですが、要するに見えている"ブツ"）がどのレイヤーなのか分かりにくいこと事もしばしば。どのレイヤーなんだー、探せないっ！というときの為に、そのブツがどのレイヤーなのかすぐに判別できる方法を教えてもらいました。備忘録的に記録。

移動ツール
↓
Macならoptionキーを押しながら、探したいブツを右クリック
↓
レイヤーパレット上でブツのレイヤーが選択されている状態になる

簡単ですが、かなり便利。

以前Skypeをアップデートしたとき、
突然メニュー類が英語表記になってしまって焦ったことがあります。

バグなのかどうかはわかりませんが、
単純に文字の設定が英語になってしまっているだけですので、
日本語に直すのも簡単です。

メニューから
「Tools」＞「Change Language」＞「日本語（Japanese）」を選択。

以上です。

別のPCでもちょくちょく同じ現象が起こっていたので、
一応メモ書きでした。

切り抜き作業で大変なのは、やっぱり髪の毛などの細かい部分。
以前は「抽出」などを使ってなんとかこなしていましたが、
その「抽出」も写真次第では使いづらく、さらにいつの間にかなくなっていました。

ですが、CS5ではさらに簡単で、精度の高い「境界線を調整」という
機能があります。
（機能自体はCS3からあったようですが、CS5で大幅に強化されたとか）


使い方はこんな感じ。


（1）選択範囲を作成する

ここはそれぞれやりやすい方法で良いと思います。
切り抜きたい範囲を選択し、髪の毛などの細かい箇所は大まかに選択します。
内側気味に取ったほうが上手くいきやすい、らしいです。




（2）境界線を調整

選択範囲を右クリックし、「境界線を調整」という項目を選択。
パネルが表示されます。




（3）調整範囲の選択、詳細設定

赤で囲んだ「半径調整ツール」が選択されていることを確認し、
大まかに選択した箇所をなぞります。
何度かやることで髪の毛が綺麗に表示されます。



今回はほぼ無調整ですが、上手く選択されるように設定を調整しましょう。
「不要なカラーの除去」にチェックを入れれば、境界付近の
背景の色が透けてしまっているような部分を自然な色に直すことができます。


（4）完成

OKを押して切り抜き完了。
今まで以上に簡単に、かつ正確に切り抜けました。

以前に書いたストライプジェネレーターと同じように、
タータンチェックを作成することができるジェネレーターです。

Tartan Maker
http://www.tartanmaker.com/

こういう柄は思い通りのものを作ろうと思うと
とても手間がかかってしまうので、
このようにプレビューしつつ微調整できるジェネレーターは
ホントに助かります。