過去の記事でデザインをするのに知っておきたいソフトや技術周りの知識という内容のものを書きましたが、編集可能なデータを貰っているはずなのにテキストが打ち替えられない、オブジェクトの移動が出来ない。などの問題が発生するケースが有ります。
昔デザインデータを連携したプログラマーさん達からよく問い合わせがあったので、備忘録的に書いておこうと思います
昔デザインデータを連携したプログラマーさん達からよく問い合わせがあったので、備忘録的に書いておこうと思います
この問題のケースで抑えておきたいポイントは、デザインデータごとの「レイヤー」、「グループ化・シンボル化」、「選択ツール」です。
これらの機能をソフトごとに基本操作を覚えておくと、あれ？テキストが触れない！とか一つのオブジェクトを動かしたいのに他の物まで動いていしまう！なんてことはなくなるでしょう。
まずは、第一弾としてレイヤーの基本操作をIllustrator、Photoshop、Fireworksそれぞれのポイントを抑えて学習していきましょう！
これらの機能をソフトごとに基本操作を覚えておくと、あれ？テキストが触れない！とか一つのオブジェクトを動かしたいのに他の物まで動いていしまう！なんてことはなくなるでしょう。
まずは、第一弾としてレイヤーの基本操作をIllustrator、Photoshop、Fireworksそれぞれのポイントを抑えて学習していきましょう！
最近ではレイヤーといえば、一度は耳にしたことがあるぐらい色々なアプリケーションで採用されている機能です。
概念的にはレイヤーは『透明のシート』です。その透明のシートにオブジェクトやテキストなどを描画していき、重ねて表示するようなイメージです。
こうすることで、後から動かしたいものや、変更したいものにアクセスしやすくなります。
ただし、これらのレイヤーの操作がソフトごとに微妙に違うので、ソフトが変わると操作できるものも操作できないように見えてしまうので注意が必要です。
概念的にはレイヤーは『透明のシート』です。その透明のシートにオブジェクトやテキストなどを描画していき、重ねて表示するようなイメージです。
こうすることで、後から動かしたいものや、変更したいものにアクセスしやすくなります。
ただし、これらのレイヤーの操作がソフトごとに微妙に違うので、ソフトが変わると操作できるものも操作できないように見えてしまうので注意が必要です。
レイヤーの操作 ： Illustrator編
例えば上記のようなボタンのデザインがあったとします。
このボタンの構造はレイヤーパレットを見るとこのような構造になっています。
これらのレイヤーは、上に行くほどオブジェクトが前面に表示されていることも確認できますね。
また、お気づきかもしれませんが、レイヤーには入れ子にする機能もあり、レイヤーの中にレイヤーを作るなんて事も可能です。フォルダをイメージするとわかりやすいかもしれません。
では概念のイメージさえできれば、後はレイヤーの操作を見ておきましょう。 上記の黒いウィンドウをレイヤーパレットと呼びます。 Adobe系のソフトではオブジェクトの操作をするためのウィンドウをパレットと呼ぶことがよくあります。
レイヤーパレットが表示されていないない場合はメニューバーの『ウィンドウ』→『レイヤー』を選択して表示させましょう。 これらの操作は下図のようになります。
これらのレイヤーは、上に行くほどオブジェクトが前面に表示されていることも確認できますね。
また、お気づきかもしれませんが、レイヤーには入れ子にする機能もあり、レイヤーの中にレイヤーを作るなんて事も可能です。フォルダをイメージするとわかりやすいかもしれません。
では概念のイメージさえできれば、後はレイヤーの操作を見ておきましょう。 上記の黒いウィンドウをレイヤーパレットと呼びます。 Adobe系のソフトではオブジェクトの操作をするためのウィンドウをパレットと呼ぶことがよくあります。
レイヤーパレットが表示されていないない場合はメニューバーの『ウィンドウ』→『レイヤー』を選択して表示させましょう。 これらの操作は下図のようになります。
説明を省いている機能もたくさんありますが、まずはこれぐらいで十分でしょう。
何より注意していただきたいのが、
の「オブジェクトのロック・解除」です。
当然のことながら、ここに鍵マークが付いていると編集できません。
編集したいオブジェクトがこの鍵マークになっていないか、まずは確認してみましょう。
しかし以下のようなケースもあるので、より注意してみてください。
何より注意していただきたいのが、
の「オブジェクトのロック・解除」です。当然のことながら、ここに鍵マークが付いていると編集できません。
編集したいオブジェクトがこの鍵マークになっていないか、まずは確認してみましょう。
しかし以下のようなケースもあるので、より注意してみてください。
レイヤーを入れ子にする機能は便利なのですが、上記のような状態ですと気が付きにくいものです。親のレイヤーをロックした場合は子供レイヤーにもうっすらと鍵マークがつくのですが、この様な逆の状態の時に、子供レイヤーが見える状態にしてやらないとロック状態がわからないのです。
では次に、レイヤーを増やさずにオブジェクトを幾つも描画していくとどうなるのか。
答えは以下の様な感じです
では次に、レイヤーを増やさずにオブジェクトを幾つも描画していくとどうなるのか。
答えは以下の様な感じです
自動的に、サブレイヤーがオブジェクトごとに作成されています。
やはりこのへんの挙動からも、Illustratorでのレイヤーの存在はフォルダに近いイメージのような気がしますね。
やはりこのへんの挙動からも、Illustratorでのレイヤーの存在はフォルダに近いイメージのような気がしますね。
レイヤーの操作 ： Photoshop編
Illustratorの時と同じように、デザインされたボタンを例に見てみましょう。
このボタンの構造はレイヤーパレットを見るとこのような構造になっています。
上に行くほどオブジェクトが前面に表示されているこはIllustratorと同じですね。
少し違うのは、レイヤーの入れ子にする機能の部分です。
Photoshopではレイヤーの中にレイヤーを作るといった感じではなく、
まさしくフォルダを作ってその中にまとめておくのです。
この部分はこちらの方が分かりやすいですね。
これらの操作は下図のようになります。
上に行くほどオブジェクトが前面に表示されているこはIllustratorと同じですね。
少し違うのは、レイヤーの入れ子にする機能の部分です。
Photoshopではレイヤーの中にレイヤーを作るといった感じではなく、
まさしくフォルダを作ってその中にまとめておくのです。
この部分はこちらの方が分かりやすいですね。
これらの操作は下図のようになります。
多少の見た目の違いはありますが、ほとんどIllustratorと同じような感じですね。
ここでも同じくレイヤーのロックには、注意が必要です。
フォルダの中のレイヤーをロックした状態で、
フォルダを閉じているとフォルダには鍵アイコンがつかないので注意して下さい。
ここでは、Photoshopのロックについて少し詳しく見てみましょう。
ここでも同じくレイヤーのロックには、注意が必要です。
フォルダの中のレイヤーをロックした状態で、
フォルダを閉じているとフォルダには鍵アイコンがつかないので注意して下さい。
ここでは、Photoshopのロックについて少し詳しく見てみましょう。
ロックと書かれた文字の横に、何やらボタンが四つもあります。
Photoshopではロックする時、何をロックするかを決められる機能があります。
Photoshopではロックする時、何をロックするかを決められる機能があります。
透明部分だけをロックするボタン
レイヤー内の透明部分のみをロックし、画像のみに書込が出来ます。
レイヤーの位置をロックするボタン
レイヤーの位置をロックします。移動ができなくなります。
透明部分のロックと位置をロック。画像と透明部分のロックと位置のロック。
というような組み合わせも可能です。
透明部分のロックと位置をロック。画像と透明部分のロックと位置のロック。
というような組み合わせも可能です。
すべてをロックするボタン
上記すべての内容のロックをします。
llustratorに比べて、ロックの機能が豊富ですので扱うデザインデータにもこのような設定の元で作成されていないかを把握することは重要なことですね。
llustratorに比べて、ロックの機能が豊富ですので扱うデザインデータにもこのような設定の元で作成されていないかを把握することは重要なことですね。
レイヤーの操作 ： Fireworks編
こちらのソフトもレイヤーが上にあるものが全面表示されるのは同じです。
基本的な考え方はIllustratorと同じです。
違うのは、考え方の違いというか、表示の違いです。
レイヤーの存在事態がフォルダという状態になっていますね。
サブレイヤーを作成した場合は、フォルダの中にフォルダが表示されます。
IllustratorとPhotoshopの考え方をミックスしたような感じですね。
個人的にはこの表示方法が一番しっくりと来ます。
続きまして、レイヤーパレットの各役割です。
基本的な考え方はIllustratorと同じです。
違うのは、考え方の違いというか、表示の違いです。
レイヤーの存在事態がフォルダという状態になっていますね。
サブレイヤーを作成した場合は、フォルダの中にフォルダが表示されます。
IllustratorとPhotoshopの考え方をミックスしたような感じですね。
個人的にはこの表示方法が一番しっくりと来ます。
続きまして、レイヤーパレットの各役割です。
これも多少の見た目の違いはありますが、ほとんどIllustratorと同じような感じですね。
ここでも同じくレイヤーのロックには、注意が必要です。
フォルダの中のオブジェクトをロックした状態で、
フォルダを閉じているとフォルダには鍵アイコンがつかないので注意して下さい。
ここでも同じくレイヤーのロックには、注意が必要です。
フォルダの中のオブジェクトをロックした状態で、
フォルダを閉じているとフォルダには鍵アイコンがつかないので注意して下さい。
まとめ
さて、駆け足ですが各ソフトの扱いを見てきましたが、いかがでいたでしょうか。
同じレイヤーでもソフトによって結構違いがありますね。
レイヤーの機能はまだまだありますが、
デザイナーから渡されたデータに編集を加える際は、ひとまずこれでOKでしょう。
さて次は、「選択」についてです。 レイヤーで操作対象が編集可能な状態にできたら、次は編集したい箇所を適切に選択しないといけません。 「選択」については次の記事でご紹介いたしますので、ご期待ください。
同じレイヤーでもソフトによって結構違いがありますね。
レイヤーの機能はまだまだありますが、
デザイナーから渡されたデータに編集を加える際は、ひとまずこれでOKでしょう。
さて次は、「選択」についてです。 レイヤーで操作対象が編集可能な状態にできたら、次は編集したい箇所を適切に選択しないといけません。 「選択」については次の記事でご紹介いたしますので、ご期待ください。