Illustratorファイルのコーディングまでの手順をまとめた。

フリーランスの心得 ブログ ホームページ制作

他の人がどういう風にしているのかわかりませんが、Illustratorでのデータ作成に慣れてしまったので、もはやこれ以外で今以上のスピードを出すことができない!

そんな体になってしまいました。

Sketch?

photoshop?

 

おっそいいいい!!!

手順はこちら

  • 1.Illustratorのアセット書き出し(png形式もしくはsvg)
  • 2.Fireworksでpngの空白部分を削除
  • 3.フォルダに素材を移動させる
  • 4.png画像の圧縮をする
  • 5.テキストを入力する
  • 6.スタイルを適用させる

この5つの手順で勧めてます。

1.Illustratorのアセット書き出し

IllustratorにはCCからアセット書き出しという機能が追加されました。
まさにウェブのために機能!AdobeはまだIllustratorを見捨てていないという事。

ただこのアセット書き出し欠点がありまして、マスクした画像の元画像の大きさでデータを書き出してしまう

こんな感じです。
いつになったらこれが治るのか?この機能はむしろいつ使うの?ってくらい謎の仕様がまだ残ってます。

おそらくphotoshop派もsketch派もこれがあるから嫌なんじゃないか!って思いますがこれのデメリットをなかったことにしてくれるのがFireworks

※注意事項

Illustratorのデータは、72dpiのRGBカラーWebから作成しましょう。
ピクセルにスナップ設定にしておかないと微妙に画像がずれるのでそれだけはしっかりしておきましょう。
どうしても幅が揃わない時は、プロパティで直接場所を移動させましょう。

アセットの書き出しで空白を削除して書き出す方法

2.Fireworksでpngの空白部分を削除

photoshopには、この機能はついていません!!なぜならphotoshopでサイトを作る人にとってこの機能は不要なので・・・。
Fireworksには、空白部分をカンパスに合わせるという機能があります。

それを使えば、空白部分を削除してくれるんです!!

場所はここ「変更>カンパス>カンパスを合わせる
ショートカットはCtrl+Alt+F

ただ画像が複数あると一個一個はめんどくさいですよね?

そこで便利なバッチ処理!
カンバスに合わせるをバッチ処理に登録しておきます。

そうすると一瞬で書き出した画像を処理してくれます。

ちなみにFireworksはCCにはありません。つまり!お払い箱です・・・がこれがないと困るのですよ・・。

3.画像フォルダに書き出した素材を振り分ける

画像のフォルダ構成は主にこんな感じ

images
>background
>common
>ico
>title
>nav

などなどフォルダに分けておきます。
画像名も、頭にbg_とかico_とかつけておくのが見つけやすくていいかなーって思います。

それにコーディング時にico_をいれるとそのフォルダに入っている該当の名前のファイルが表示されてくれるのがコーディングも楽になります。
navならnav_とすれば覚えなくても画像を選択することが出来ます。

navは変更予定がなければ、nav_homeとかではなくnav_1というふうに連番で付けたほうが良いでしょう。

4.PNGGauntletを使ってpng画像の圧縮

pngはなにかさわって保存するとその情報を持って保存されてしまうので、容量が大きくなってしまいます。
なので、サイト公開時にはかならず圧縮しましょう。

PNGGauntletを使えば一瞬で圧縮してくれます。

画像フォルダごとPNGGauntletにドラックするとpng画像を圧縮してくれます。各格納フォルダにいれてくれるので便利。
jpg画像とかが入ってると圧縮はしてくれないですが、読み込んでしまうので注意。

jpgはFireworksでバッチ処理で圧縮すると良いです。

Fireworksは僕にとってただのバッチ処理ツール

5.テキストを入力する。

あとはコーディングのみ!

まずはテキストを入力します。

この時、ある程度のHTMLの構成を作ります。header nav main footerなどなど
レイアウトもこの時に組んでしまいます。
bootstrapとか使ってるならdivにクラス名とか入れながら入力します。

ブラウザの確認はあとでOK
とりあえずそのページで使うテキストや画像をすべて入力します。

6.スタイルを適用させる

テキストが終わったら、ブラウザ確認しながらスタイルを適用させていきます。

コーディング方法とかオススメツールをまとめてます。↓

[blogcard url=”https://sheeplog.work/editor-dreadmweaver-good/”]

まとめ

  • 無駄な動作はしない!
  • 同じ作業は、バッチ処理!
  • ツールは使え!

これがIllustratorでコーディングするまでの流れです。
どうですか?sketchやPhotoshopと違いますか?

Photoshopのextractは個人的にはめちゃ使いやすくいいなーって思いましたけど、photoshopデータを作るのがめんどくさいっていうかレイヤー構成がだるすぎたのでそんなことしてる暇はなかった。

そんなんレイヤー構成とかIllustratorは不要!

たぶん後なにか便利なツールとかない限りこれ以上早くならないくらいの速さのはず。

明日は、Illustratorのこれだけ覚えとけばOKなショートカットを紹介します!

気に入った記事であれば、ぽちっとお願いします<(_ _)>