dasaionnaの日記

人から学び、自分を作る。

スライス

テキストはあまり画像化しない。フォントデータを埋め込んで、テキストで表記。画像として書き出してしまうと視覚障害の人がわからなかったりする。ただしオシャレなフォントとかは画像化するかも。
 
 
書き出しとは、文や写真のレイアウトが終わったら、それぞれをパーツとして切り出す、コーディングの前に行う作業。実際はdreamweaverの方でテキストの色を変えたり、見出しに設定したりなどする。
 
webの特徴として大事なのは、 更新や修正が伴うこと(何度もデータを触る。半年くらいして更新しないつもりが、依頼されたりして困ることがある。)  チームで制作すること(環境が違うケースも)。データがぐちゃぐちゃだと後で大変なことになったりする。
 
illustratorでwebカンプを作る時は、ロゴなどのよく使う要素は個別レイヤーにしておいた方がいい。(デバイステキスト、バナー部分OL済み、ロゴ、デザイン、土台)
テキストをアウトラインするか、dreamweaverでフォントを呼び出して表記するかは、プロジェクト次第で異なる。後工程のコーダーさんが持ってないフォントを使うなら、アウトラインしてデータを渡す。また、「menu」のところを「concept」にしてよと修正依頼があった時、コーダーがフォントを持っていないときはデザイナー側で修正してデータを渡す場合がある。
 
windowsmacなどデバイスによって表示が違っても構わないテキストを「デバイステキスト」という。レイヤーで区別しておくと、コーダーの人が「ここはテキストでいいのね」「ここは画像にしなくちゃいけないのね」と判断がしやすい。
 
photoshopではレイヤーには名前をきちんとつけてあげた方がいい。map-iconなどなど。名前をつけてあげると検索でレイヤーを名前検索したりできるので便利。コーダーにデータを渡すときはグループフォルダにバラバラのレイヤーをちゃんとまとめて閉じて渡してあげる。開いた状態でデータを渡さないこと。
 
photoshopではフォントがなくてもテキストは表示可能だが、コーダーがフォントを持っていないと、レイヤーのTのところがエラーになったりする。そのときはデザイナー側が画像を用意してあげたりする。
 
書き出しの流れ
 
●画像の書き出し方法を決める
●HTML、CSSの書き方と画像の書き出し範囲を決める(背景カラーなどはCSSで扱うこともできる)
●画像の拡張子を決める
●画像のファイル名を決める
大きいプロジェクトとかだと、ファイル名のつけ方(ローカルルール)の規則に従う。
 
photoshopillustratorもスライスで書き出しができるのは共通だが、photoshopはもう少し進んでいて「アセットによる書き出し」というのがスタンダードになっている。レイヤーの名前に応じて画像を書き出してくれる。レイヤーを非表示にして書き出したりも出来る。