adobe

illustratorの線がまたまたボケる

またしても、知らない人を除けばほぼみんな知ってるという話ですが
イラレでWebデザインする時は、小数点に気をつけないとイカンです(イラレでWeb用に保存のなどで書き出した画像がぼやける理由)。

上記の一件で、もうWeb用の画像加工もイラレで大丈夫!
なんて思っていたんだけど、どうもは別の話でした。

例えば、以下のページ様を参考に設定してみたのですが(ピクセルプレビューを使っていなかった)。
参考:イラレラボ illustrator-labo – Tips_イラレでもズレませんブレません

ただの矩形に1pxの線を内側に指定すると次のように上部の線のアンチエイリアスがおかしくなりました。
[image]線の位置をパスの内側にすると一部ぼやける

次にこちらのページ(とろテク – Illustrator CS2以降 1ピクセルの線をWEB用に保存)を参考に-0.5pxのオフセットを使ってみることに。

オブジェクト – パス – パスのオフセットを適用

[image]オブジェクト - パス - パスのオフセットを適用
あるぇ?

そして次に出会ったこちらのサイトIllustratorでピクセル単位の作業を奇麗に行うための方法(イラレのピクセルずれ問題) – Memento Macを何度か読み返していると。

効果 > パスのオフセットを使う!!と大きく書いてありました(´・ω・)

効果 – パス – パスのオフセットを使用

[image]効果 - パス - パスのオフセットを使用

やっと出来た><

蛇足:効果とオブジェクトの違い

効果はアピアランス、修正も削除も出来る。
オブジェクトはパス自体を変形させる。

イラレ気が利かない。

Photoshop / デュアルブラシとカスタムしたブラシの保存

[image]カスタムブラシ

デュアルブラシ、ブラシのマスクみたいでオモロイです。
けどそうそう毎回いじったりしなさそうなのでメモ。

その前に、カスタムしたブラシを保存する方法を覚えておく

[image]ブラシの保存
新規ブラシを作成のアイコンをクリックして、名前をつけて保存。

新しいブラシを登録するのは[編集] – [ブラシを定義]の方

続きを読む

PhotoshopCS2以降でオブジェクトを等間隔に分布させる.jsxがあったよ。

illustratorやFireworksにある等間隔に分布ってものそい便利じゃないですか。
でも残念な事にphotoshopは出来ないんですよね、残念な事に。

そこでjsxで出来ないかな?と調べて書いてみようと頑張ったんですけど、
複数選択したレイヤーの情報を取得する事すら出来ずに挫折しました(割と手前の壁)。

しかし、海の向こうではすでに等間隔に分布させるjsxを作って配布されてる方がいらっしゃいました、すごいなー。

ダウンロード:Adobe Photoshop Scripts | Trevor Morris Photographics
垂直方向用のjsxしか試してないけど、水平方向用や他にも沢山jsxがありまんた。

分布結果の違いを比べてみた画像

整列前の適当な配置、青い背景はサイズが分かりやすいようにとつけちゃった。
[image]元の配置

photoshopの左端を分布 / 重なるよねぇ
[image]左端を分布で整列させた結果

photoshopの水平方向中央を分布 / 最初何が起きたのか理解できなかった。
[image]水平方向中央を分布で整列させた結果

photoshopの右端を分布 / 重なるよねぇ
[image]右端を分布で整列させた結果

Adobe Photoshop Scripts | Trevor Morris Photographics
Photoshop > Scripts > Distribute Layers Horizontallyを使用
[image]Distribute Layers Horizontally 0-1-4.jsxを使った結果
SUGEEEEEEEEEEEE!!!!!1
愛してる!!!!!!!!!

ファイル比較ツールをWinMergeに変更す

[image]WinMerge見やすい

DFからWinMerge 日本語版に乗り換えまんた。
(以前のpost:DFを使ってDreamweaverでファイルの比較を有効にする)

ファイル比較ツールなにそれ?って人に説明すると
次のような異なるhtmlファイルのどうしようもないない文字列の中から異なる部分をサクッと見つけてくれます。

example1.html
[html]<body>
<p>猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫</p>
</body>[/html]

example2.html
[html]<body>
<p>猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫描猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫</p>
</body>[/html]

* 猫(ねこ)の中に描(えが)が混ざってます。

続きを読む

ルートパスとDreamweaverとバーチャルホスト(バーチャルドメイン?)

突然、ルートパス(サイトルート相対パスと呼ぶの?)で書かれたサイトを触る事になって困ったので調べたメモ。

そもそもルートパス(サイトルート相対パス?)ってなんぞ?

ルートパス
サイトルートのルートディレクトリからみた相対パス
/から始まる。
絶対パス
外部サイトへリンク貼るときなんかのパス
httpから始まる
相対パス
ファイルから見た対象ファイルへのパス
よく使う

ルートパスで書かれたサイトをローカルでプレビューするには

Dreamweaverだと

[text gutter=”false”][編集] – [環境設定] – [ブラウザでプレビュー] – [オプション]一時ファイルを使ってプレビューにチェック[/text]
しておけば相対リンクがドキュメントでもプレビュー出来る(プレビューは)。

編集する設定はadobeのサイトAdobe Dreamweaver CS4 * 新規リンクの相対パスの設定
を参照 / ヘルプの引用

[image]一時ファイルを使用してプレビュー

[image]サイト管理のとこ

メリット(だと思うところ)
これだとローカルにサーバーを立てる必要もない。

デメリット(だと思うところ)
IETesterでIE6の表示を確認する時たいへんなのと
編集修正するたびブラウザの更新で確認できない。

XAMPPだと

バーチャルホストを使うのが現実的みたい。

編集するファイルは2つ
1つめ
C:\xampp\apache\conf\extra\httpd-vhosts.conf

(うちのPCでの設定ファイルの場所)

1-1)
[text]NameVirtualHost *:80[text]のコメントアウト(##)を削除して有効化する。

1-2)
例 / dドライブのsiterootフォルダをドキュメントルートにして
http://sitenameでアクセス出来るようにするには。

[text]<VirtualHost *:80>
DocumentRoot "D:/siteroot"
ServerName sitename
<Directory "D:/siteroot">
order deny,allow
allow from all
</Directory>
</VirtualHost>
[/text]
(ちょっと修正した)
Access forbidden!Error 403になっちゃうならDirectoryの指定は必要
<Directory>は<VirtualHost>の中でも外でも問題なにのだろうか?
DocumentRootのパスに2バイト文字が混ざってると上手くいかない感じ。

Directoryの中に記述できるモノもようわからん。
ここらへん?
http://httpd.apache.org/docs/2.2/ja/mod/core.html#directory
http://httpd.apache.org/docs/2.2/ja/mod/core.html#options
http://httpd.apache.org/docs/2.2/ja/mod/core.html#allowoverride

2つめ
C:\WINDOWS\system32\drivers\etc\hosts

例 / さっきのServerNameに記述した名前(sitename)を追加
[text]127.0.0.1 localhost sitename[/text]とか
[text]127.0.0.1 localhost
127.0.0.1 sitename[/text]みたいな感じで

Apacheを再起動してhttp://sitenameにアクセスしてみる。
いままでこれ知らなかったから
phpのテストをしたい場合
xamppのhtdocs以下にフォルダ作ってて
不便だと思ってたけど、他のサイトと同じように管理出来るのかしら。
ん~2バイト文字のフォルダ名が付いてるとエラーがでるのぅ。
もうちょい試してみよう。

参考にしたサイト

続きを読む