WEB制作の学習帳

WEB制作を様々な視点から学ぶブログ

Illustrator

IllustratorからPhotoshopに書き出し

Illustratorのデータ上ではきちんとオブジェクトが別レイヤーに分かれているのに Photoshopではレイヤーが統合されてしまうことがあるのでその対処法 1.書きだしたpsdファイル 灰色の背景がくっついてしまい各部で編集出来ない 2.Illustratorに戻りその部分…

CSSスプライト用画像の制作(アピアランス)

長方形ツールで160 X 60 塗り:あり 線:なしで作成 アピアランスパネルから新規線を追加。 線の位置を内側にする。 慣れるとこの方法のが早い上、パスのアウトライン化しないでもIlustrator上でX/Yともに0.5pxがなくなる。またグラデーションも選択ツールか…

CSSスプライト用画像の制作2

(線をパスのアウトライン化しているので塗りと線がグループ化されているのでダイレクト選択ツールで塗りの白を選択する) グラデーションパネル→グラデーション この時、カラースライダーが1色だったらグレースケールなのでRGBに変更する(左右) 全て選択して…

CSSスプライト用画像の制作1

Ctrl + Nで新規作成(IllustratorでのWeb制作用環境設定参照) 定規を出して必ず左角をX:0 Y:0にしておく (このブログではあくまでもIllustratorでの線の扱いに気をつけてもらうため塗りと線で作っているが授業でアピアランスで制作していく方法を教える) 800p…

Web制作用Illustratorの設定

Ctrl + Sで新規ファイルを作る時、詳細から ラスタライズ効果:スクリーン72ppi プレビューモード:ピクセル 新規オブジェクトをピクセルグリッドに整合にチェック メニューバーファイル→環境設定 ガイドグループのカラーおよびスタイルは自分が分かりやすい…

パスファインダーの使い方

左上から順に 合体・前面オブジェクトで型抜き・交差・中窓 分割・刈り込み・合流・切り抜き・アウトライン・背面オブジェクトで型抜き 拡張ボタン 複合シェイプの状態で【拡張】ボタンをクリックすると、オブジェクトが結合して一つのパス(又は、一つの「…

Illustratorのアピアランス

アピアランスとは オブジェクトの外観のこと。 属性があり、塗り・線・透明度・効果がある。 ダウンロードファイル http://siteya19.co.jp/ftadata/1C405.ai 線:黒 塗り:白 線幅:1px を確認 線を10px 線端:バット線端 角の形状:ラウンド結合にチェック …