デザイナーのデータを扱うときに知っておくべきこと。 その1 - レイヤー操作の基本

過去の記事でデザインをするのに知っておきたいソフトや技術周りの知識という内容のものを書きましたが、編集可能なデータを貰っているはずなのにテキストが打ち替えられない、オブジェクトの移動が出来ない。などの問題が発生するケースが有ります。

昔デザインデータを連携したプログラマーさん達からよく問い合わせがあったので、備忘録的に書いておこうと思います

この問題のケースで抑えておきたいポイントは、デザインデータごとの「レイヤー」、「グループ化・シンボル化」、「選択ツール」です。

これらの機能をソフトごとに基本操作を覚えておくと、あれ？テキストが触れない！とか一つのオブジェクトを動かしたいのに他の物まで動いていしまう！なんてことはなくなるでしょう。

まずは、第一弾としてレイヤーの基本操作をIllustrator、Photoshop、Fireworksそれぞれのポイントを抑えて学習していきましょう！
 

 

最近ではレイヤーといえば、一度は耳にしたことがあるぐらい色々なアプリケーションで採用されている機能です。

概念的にはレイヤーは『透明のシート』です。その透明のシートにオブジェクトやテキストなどを描画していき、重ねて表示するようなイメージです。

こうすることで、後から動かしたいものや、変更したいものにアクセスしやすくなります。
ただし、これらのレイヤーの操作がソフトごとに微妙に違うので、ソフトが変わると操作できるものも操作できないように見えてしまうので注意が必要です。

レイヤーの操作　：　Illustrator編

例えば上記のようなボタンのデザインがあったとします。 このボタンの構造はレイヤーパレットを見るとこのような構造になっています。
 
これらのレイヤーは、上に行くほどオブジェクトが前面に表示されていることも確認できますね。

また、お気づきかもしれませんが、レイヤーには入れ子にする機能もあり、レイヤーの中にレイヤーを作るなんて事も可能です。フォルダをイメージするとわかりやすいかもしれません。

では概念のイメージさえできれば、後はレイヤーの操作を見ておきましょう。 上記の黒いウィンドウをレイヤーパレットと呼びます。 Adobe系のソフトではオブジェクトの操作をするためのウィンドウをパレットと呼ぶことがよくあります。

レイヤーパレットが表示されていないない場合はメニューバーの『ウィンドウ』→『レイヤー』を選択して表示させましょう。    これらの操作は下図のようになります。  

   

 

 説明を省いている機能もたくさんありますが、まずはこれぐらいで十分でしょう。
 
 何より注意していただきたいのが、の「オブジェクトのロック・解除」です。
 当然のことながら、ここに鍵マークが付いていると編集できません。  
 
 編集したいオブジェクトがこの鍵マークになっていないか、まずは確認してみましょう。
 しかし以下のようなケースもあるので、より注意してみてください。  

   

 

  レイヤーを入れ子にする機能は便利なのですが、上記のような状態ですと気が付きにくいものです。親のレイヤーをロックした場合は子供レイヤーにもうっすらと鍵マークがつくのですが、この様な逆の状態の時に、子供レイヤーが見える状態にしてやらないとロック状態がわからないのです。

では次に、レイヤーを増やさずにオブジェクトを幾つも描画していくとどうなるのか。
答えは以下の様な感じです  

 

 

 自動的に、サブレイヤーがオブジェクトごとに作成されています。  
 
 やはりこのへんの挙動からも、Illustratorでのレイヤーの存在はフォルダに近いイメージのような気がしますね。  

   

レイヤーの操作　：　Photoshop編

 

 

  Illustratorの時と同じように、デザインされたボタンを例に見てみましょう。  このボタンの構造はレイヤーパレットを見るとこのような構造になっています。    
 
 上に行くほどオブジェクトが前面に表示されているこはIllustratorと同じですね。
 
少し違うのは、レイヤーの入れ子にする機能の部分です。  
 Photoshopではレイヤーの中にレイヤーを作るといった感じではなく、  
 まさしくフォルダを作ってその中にまとめておくのです。
 この部分はこちらの方が分かりやすいですね。    
 
 これらの操作は下図のようになります。  

 

 

  多少の見た目の違いはありますが、ほとんどIllustratorと同じような感じですね。
ここでも同じくレイヤーのロックには、注意が必要です。
フォルダの中のレイヤーをロックした状態で、
フォルダを閉じているとフォルダには鍵アイコンがつかないので注意して下さい。

ここでは、Photoshopのロックについて少し詳しく見てみましょう。  

 

 

  ロックと書かれた文字の横に、何やらボタンが四つもあります。   
 Photoshopではロックする時、何をロックするかを決められる機能があります。  

 

   透明部分だけをロックするボタン  

 

  レイヤー内の透明部分のみをロックし、画像のみに書込が出来ます。  

 

 

   

   レイヤーの位置をロックするボタン  

 

  レイヤーの位置をロックします。移動ができなくなります。   
  透明部分のロックと位置をロック。画像と透明部分のロックと位置のロック。  
 というような組み合わせも可能です。  

   

   すべてをロックするボタン  

 

  上記すべての内容のロックをします。

llustratorに比べて、ロックの機能が豊富ですので扱うデザインデータにもこのような設定の元で作成されていないかを把握することは重要なことですね。  

   

レイヤーの操作　：　Fireworks編

 

 

 こちらのソフトもレイヤーが上にあるものが全面表示されるのは同じです。
 
 基本的な考え方はIllustratorと同じです。
違うのは、考え方の違いというか、表示の違いです。
レイヤーの存在事態がフォルダという状態になっていますね。

サブレイヤーを作成した場合は、フォルダの中にフォルダが表示されます。
IllustratorとPhotoshopの考え方をミックスしたような感じですね。
個人的にはこの表示方法が一番しっくりと来ます。

続きまして、レイヤーパレットの各役割です。  

   

 

 これも多少の見た目の違いはありますが、ほとんどIllustratorと同じような感じですね。  
 ここでも同じくレイヤーのロックには、注意が必要です。  
 フォルダの中のオブジェクトをロックした状態で、
 フォルダを閉じているとフォルダには鍵アイコンがつかないので注意して下さい。  

   

まとめ

 

 さて、駆け足ですが各ソフトの扱いを見てきましたが、いかがでいたでしょうか。  
 同じレイヤーでもソフトによって結構違いがありますね。  
 
 レイヤーの機能はまだまだありますが、  
 デザイナーから渡されたデータに編集を加える際は、ひとまずこれでOKでしょう。  
 
 さて次は、「選択」についてです。 レイヤーで操作対象が編集可能な状態にできたら、次は編集したい箇所を適切に選択しないといけません。 「選択」については次の記事でご紹介いたしますので、ご期待ください。

 

デザインをするのに知っておきたいソフトや技術周りの知識

 

   

   

Webデザインをする上で、どのようなソフトや技術を使うかは、
どのようなプログラム言語を選択し、プログラミングをするのかと同じで、    ソフトや技術によって得意分野が有り、
どれを選択し作成するかで 大きく変わります。

まずは、Webデザインでよく使われるソフトや技術にはどんなものがあるのかを見て行きましょう。

 

 

それぞれのソフトや技術の関係をまとめると、下図のようになります。グラフィック要素を作成するものからコーディングの技術まで幅広くありますが主要なものをまとめるとこの様な感じになります。
   
  これらの関係をよく理解しておくと、適切なソフトや技術をチョイスできたり、デザイナーとのやりとりの時に役に立ちます。  

 

   

 

  代表的なソフトを相関図にしてみました。それぞれのソフトによってこの図のように役割がわかれて います。全てAdobeのソフトですが、デザイナーとのやりとりをする際はこれらのアプリケーションがほとんどです。     デザイナーとのやりとりの際は体験版等を賢く利用しましょう。

上記の図で重要なのが、オレンジ部分の拡張子です。
開発の案件の際などにデザインを外注するケースはよくあると思いますが、デザイン会社・デザイナーに納品してもらう成果物にこの拡張子のデータが含まれているかの確認はとても大事です。
※見積の金額にも関係してきます。

例えば、PhotoshopでデザインしたWebページの変更や修正を行う際は『.psd』の拡張子があるデータを納品してもらわないと後でまたデザイン会社に修正依頼等をしないといけなくなります。せっかくデザイン関係の事をやってみようと思っても、この編集可能なデータがないと意味がありません。『.jpg』なんかは、NGです。ただの一枚の写真と同じなので、テキストを打ち変えることすら出来ません。

さて、これらのアプリケーションの関係が見えてきたところで、それぞれのアプリの概要を見て行きましょう。

このアプリケーションが得意とするのは、図形描画です。 例えば四角や丸、三角、星など。なんだそんなことかと思われるかもしれませんが、イラストレータのスゴイところは、これらの基本図形を手軽に且つ、綺麗に描画する事は勿論、それらの編集や利用が他のソフトに比べて、多機能でとても使いやすいのです。

図形の合体や型抜きから始まり、回転とコピーを中心点を自分で決めて行えるなど、他のソフトでは何段階ものステップを踏まないと実現できないような描画をいとも簡単に行えてしまいます。

その他にも便利な機能はたくさんありますが、Illustratorは印刷向けのデータを作成する機能もたくさんありWebにおいては使わない機能も少なくありません。

今後、このブログではWeb制作に必要な部分のみにフォーカスをあてて色々な使い方をご紹介していきますのでそちらの方もよろしければ、ご参考にしてみて下さい。

デザインをしない人でも一度は聞いたことのあるソフトですね。 皆さんご存じの通り、写真加工の得意なソフトです。

しかしWeb制作ではリアルなボタンの作成から、レイアウトデザインまで幅広く使われています。 もちろんIllustratorが得意な図研描画だってできちゃいます！

え？じゃあPhotoshopだけでいいんじゃないの？と思われるかもしれませんね。 確かにPhotoshopだけでも、Webデザインはできます。 しかしIllustratorが得意とする図形描画もPhotoshopだけでやってしまおうとすると、 複雑なステップを踏まないといけなかったり、編集がしにくくなったりします。

イラストレーターで作った図形をPhotoshopに読み込んで、リアルな立体感を付ける。 といったような流れが理想的なのではないかと思います。

また、PhotoshopもIllustratorと同じく印刷用の機能も兼ね合わせているので、Webに特化した学習を意識しないと知らなくていいことに無駄に時間を割くことがあります。

 

 

IllustratorとPhotoshopを足したようなソフトです。
  両ソフトの機能をWeb用に特化させたような感じです。

Web用に機能が絞られていますので、動作も軽い！ 私はこのソフトをよく使っています。

しかし、さすがにIllusutratorほどパワフルな図形描画機能まではありませんし、高度な画像加工やリアルな描画機能もありません。

私の場合、Fireworksを基点に制作を行い、事足りない場合にIllustratorとPhotoshopを用途に応じて取り込むといった感じです。

また別の記事でご紹介しようと思っていますが、このソフトから離れられない理由はスライス作業の手軽さが一番です。作成したデザインはコーディングに入る前に必ずこのスライス作業を行うのですが、このソフトが一番、直感的に且つ、スピーディーに行えます。

コーディング用のコードエディタソフトです。  
  HTML、CSSの作成からPHP、Javascript等の幅広い言語に対応。

このソフトで作成されたデータは、.html , .css , .php , .js　などになりますので、
特にこのソフトを持っていないとデータが開けないといったことはありません。

GUIでコードを生成する機能が充実しているので、 デザイナーがコーディングまでを担当する際などに愛用されています。

Flashと言えば、とても有名なアニメーションを作成するアプリ。
実はこのFlashは1つのアプリケーションとしては珍しく、使う人間の種類が大きく2つにわかれます。

『デザイナー』と『プログラマー』。

このアプリケーションはグラフィックデザイン的な要素と、
プラグラミング的な要素が融合しているのです。

そのため、かっこいいアニメーションを作れるかとおもいきや、
データベースと連動し高度なアプリケーションを作成してしまうことまできます。

主に印刷物で雑誌や書籍などの複数ページから構成されるものを作成する際に、愛用者が多いアプリです。

最近では電子書籍の対応も進んでいますので、今後のWeb制作との関係も注目すべき点ではないかと思います。