みなさん、こんにちは。

みなさんは画像をスライスする時、何か気を付けていることはありますか？

はじめの頃、私は特に意識することもなく、スライス作業をしていました。

しかし、コーディングに入り進めていく中で、自分なりに気付いたことや教えてもらったこと、少しまとめてみました。

 余白をとってスライス

私が初めてPhotoshopのスライス作業をした時は、絵や文字が途切れないギリギリの部分でスライスしていました。

だめではないとは思うのですが、効率的に良くない場合もあるようです。

そこであえて余白をとってスライスします。

そうすることで、「margin」や「padding」の指定をしなくて済むようになります。

※デザインによっては難しい場合もあります。

同種類の画像は縦幅揃えてスライス

例えばなのですが、上図のような「手順の流れ」という項目があったとして、

「手順1」「手順2」「手順3」．．．と左右のどちらかに画像と説明文が入ります。

この時、画像のサイズを揃えてスライスしてあげることで、「widht」「float」の指定がまとめやすくなるかと思います。

PCのみ？スマフォは…？

余白をあえて残してスライスする場合もありますが、

PC版だけではなく、レスポンシブ対応でスマフォで共有する画像がある場合は、余白に注意してスライスした方が良いかも知れません。

例えば、PC版では画像が横に並んでも、スマートフォンでは画像を縦にすることもあります。

片寄った余白がとられていると、画像をセンターに配置しても、絵自体は真ん中にあるように見えません。

（左右均等の余白がとられていれば大丈夫だと思います。）

すでに出来上がっているサイトをレスポンシブ化する場合など、画像を確認して、余白の空きが片寄っていた場合は、画像の余白を均等にし直す必要がありそうです。

未だに、私はスライス作業をする時は迷うこともあるのですが、

横に並んでいる複数の画像の場合、まとめてスライスしようと思えばできるのですが、時間が経ってからレスポンシブ化になった時の事を考えたりすると、分けてスライスした方がいいかなぁとか、1つ1つの画像にリンクを貼りたい等、色々考えると結構時間がかかるものです。

そこでやはり他のスタッフの制作したサイトや、普段何気なく見ているホームページを見た時、「ここは画像かな」とか、「ここはどんなふうにコーディングしているんだろう」とかチェックする週間をつけることも「上手く速く正確に」できるようになるコツの1つではないかなぁと感じています。

以上になりますが、ここまで読んでくださりありがとうございます。

当スクールでは無料の体験授業を受け付けております。

分からないことや気になることなどがありましたらお気軽にお問い合わせください＾＾