こんにちは、ナカガワです。

企業実習もあとわずかとなってまいりました。

3週間、本当にあっという間です。

濃かった、本当に本当に濃かった。

Photoshopでデザインなんてろくにしたこともない私が、バナーのトレースを数個していきなりサイト制作にはいって、最初は「大丈夫かな？」と心配で心配でならなかったです。

ですが、実習担当の小薮さんの的確なご指摘とご指導でなんとか形になりました。

このような感じです。

こちらでは一部のみ載せさせていただきます。といいますのも、コンテンツが多いのでどんどん長くなって1枚絵で収まりきらないのです。

最終的に形になったものは、最終日に改めて掲載させていただきます。

前にも申し上げましたが、サイトデザインは実はこれが初めてで、それゆえに少し進んでは調べて、また少し進んでは調べてを繰り返して、非常に緩慢な歩みでここまできました。

「もっときちんとデザインもやっておけばよかった」とつくづく痛感させられます。

恐らく、これをお読みになっているweb初学者の方々も同じような壁に当たると思いますので、本日は私がつまづいた中から「スライス」についてお話させていただきます。

web制作において、デザインしたものをweb上に実装するのがコーディングなのですが、Photoshopで制作された1枚の長大な絵をそのまま「ぺたっ」と貼り付けるといいのかといえばそうではありません。

仮にそうしたら、1枚の大きな画像がそこにあるだけでナビもボタンもバナーも押せなくて、webサイトとしての体をなしません。

なので、出来上がったカンプデータを各パーツごとに切り取っていく必要があります。

それが「スライス」です。

ちなみに、このスライスなのですがPhotoshop cc と cs6 ではだいぶ様相がことなります。

私も試しに自分のPCでやってみたことがありますが、もう全く別物といっていいと思います。恐ろしく楽になっていて、技術の進歩を感じさせられます。

「じゃあ cc でいいじゃ」とお思いの方もいらっしゃると思いますが、この cc 最大の問題は普及率なんです。

訓練校の先生がたを始め、webでお仕事をされていらっしゃる方々は、みなさん口をそろえてccよりもcs6のほうが現場では採用されているとおっしゃいます。

日本ではまだまだcs6のほうが多数派を占めているので、これから制作の現場に入って困らないように、cs6でのスライスの方法を覚えるのは決してムダではないと思います。

それに、cc のスライス、正確には「画像の書き出し」は先ほども申し上げましたが恐ろしく簡単なので、あえて教わるまでもすぐマスターできると思います。

手順はおよそ以下のとおりです

1.画像を配置

2.スライスツールを持つ

3.切り取りたい画像を囲む

4.保存形式を選んで保存する

トレースのときにもお話しましたのでここはショートカットで、ctrl ＋ o(オー) もしくは command ＋ oで画像を配置しましょう。画像の形式は基本的に仕上がったカンプデータを扱うので、多分psdだと思います。

左のツールパネルからスライスツールをもちます。おそらくデフォルトですと「切り抜きツール」になっていると思います。

そこを長推しすると隠れているほかのツールがでてくるので、そこの下から2番目の「スライスツール」を選択しましょう。

 

もちましたら、このスライスつーるで必要なパーツを切り取っていきましょう。ここで何を切り取るかは基本的にその人のコーディング計画次第なのですが、基本的にロゴやボタンなど文字ではなく、絵としてみてもらいたい部分はスライスで切り取って、実装します。

私の場合ですと、このボタンを試しに切り取ってみます。

まずは、大体の範囲を囲みまして、alt もしくは option キーを押しながらスクロールしますと拡大しますので、1px単位でしっかり囲みます。

これをひたすら繰り返すわけですが、ナビなど同じ形のものを切り取る場合は、alt もしくは option を押しながら移動するとスライスの範囲が複製されます。また、左上の数字を操作して、大きさを指定する事も出来ます。

さて、できましたらウインドウから「ファイル」→「web用に保存」を選びます。

そうしますと、このような画面がでてきます。

ここで、スライスした部分が囲まれていますので、それをクリックすると明るくなって選択された状態になります。

そして、右上で保存形式を選んだら、右下の「保存」を選びましょう。画像形式の説明はここでは割愛させていただきます。

あとは、どこに保存するかを指定するだけなのですが、ここで一つ。

次の画面に出てくる、ここの「スライス」というところ。

「すべてのスライス」「すべてのユーザーが定義したスライス」「選択したスライス」とあるわけですが、個別の話は置いておいて、間違っても「すべてのスライス」は選ばないようにしましょう。

もしえらんだら、imageフォルダ内に画像の細切れがあふれてかなり面倒なことになります。

それで、最後に右の「保存」を押したら完了です。

あとは仕上げとして、スライスされた画像はコーディングの際に分りやすくするために、名前を変えておきましょう。

長くなりましたが、いかがでしたでしょうか？

なれればこの作業すぐ終わります。私も最初は混乱しましたが、いくつかしていきますとどんどん早くなって多分最初の半分も時間がかかっていないと思います。

もっともっと練習して全ての作業をできるだけ早く、そして正確に終わらせられるようになりたいです。

本日はここまでです。お読みいただきありがとうございました。