webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

vector, raster

  • photoshopはraster graphicsを扱うソフトウェアだけれども、vector graphicsも扱うことができる。
  • 文字、シェープツールで作成した図形、イラストレーターから持ってきた画像などがそれにあたる。
  • ラスタライズとはラスター画像に変換すること。下の表でいう1→2の変換。
  • スマートオブジェクトに変換すると、変換した時点の状態を、きちんとデータの中に情報として含んでいる。そのオリジナルのデータを参照して、変更を加える。
  • 不可逆的な変更を繰り返すのではなく、必ずオリジナルの状態にたち戻って、そこから変更を加えるから、劣化が少ない。

f:id:ohta-felica:20160622044345p:plain

ベクトルスマートオブジェクト

図には、もう1つ「ベクトルスマートオブジェクト」というオブジェクトがあります。ベクトルスマートオブジェクトとは、配置、あるいはコピペで持ってきたIllustratorデータのことで、スマートオブジェクトの一種です。

ベクター形式は本来、Illustratorが得意とする領域です。複雑なベクターデータはIllustratorで作成し、ベクトルスマートオブジェクトとしてPhotoshop内に配置するといいでしょう。ベクトルスマートオブジェクトであれば、Illustratorとの連携が簡単になります。修正が発生しても、PhotoshopからIllustratorを起動でき、Illustratorで修正すると、その修正内容がPhotoshop上のデータに反映されます。

一方で「簡単な図形を描くのに、いちいちIllustratorを使うのは面倒」という声ももっともです。簡単な図形はPhotoshopのシェイプで作成し、少し複雑なものはベクトルスマートオブジェクトを活用して、Illustratorの力を借りていきましょう。

https://blogs.adobe.com/creativestation/web-start-photoshop-web-design-04-add-logo-shape 

スマートオブジェクトは「ラスター形式」の画像データの“元”を保持したオブジェクト形式です。”元”を保持しているため、編集によりドットの情報を失うことがないのです。また、Illustratorで作った「ベクトル形式」のデータもスマートオブジェクトとしてPhotoshop内で扱えます。この場合は、元の「ベクトルデータ」が保持されています。

https://blogs.adobe.com/creativestation/web-photoshop-smartobject-benefits-and-manipulation 

スマートオブジェクトの編集

スマートオブジェクトは、サイズの変化による劣化が起きない代わりに、色調の変更や画像の修正などといった作業が直接行えません。スマートオブジェクトをPhotoshop内で編集するには、大きく分けると2つの方法があります。

スマートオブジェクトをラスター形式に変更する方法

スマートオブジェクトを元のラスター形式に再変換します。スマートオブジェクトレイヤーの右側で[control]+クリック(右クリック)して[レイヤーをラスタライズ]を選択します。この場合、「スマートオブジェクト」ではなくなるので、画質の劣化に注意しましょう。

[スマートオブジェクト]→[ラスタライズ]と選択したところ

f:id:ohta-felica:20160621222307p:plain

f:id:ohta-felica:20160621222328j:plain