ダブルトーン効果の作成

Illustratorでダブルトーン効果を適用すると 一味違った画像を作成できます ご覧のようなダブルトーン効果は、画像に 2つのカラーを適用して作成します このビデオでは、この画像を 不透明度マスクとして緑の長方形に適用し その後、青い長方形の上に配置します はじめに、表示メニューから 「すべてのアートボードを全体表示」を選択すると 画面左にwebページのデザインが 画面右のアートボードの下に、元の画像が表示されます この画像にダブルトーン効果を適用し webデザインの上にドラッグすれば完成します まずは長方形を描画するので Mキーを押して長方形ツールをすばやく選択し このアートボードの左上の角から 右下の角までドラッグします 塗りには好きな色を適用できます 塗りのカラーをクリックし、この緑を適用します Escキーを押してパネルを閉じます さて、下の画像で緑の長方形をマスクします 画像の黒の部分は、緑を隠し 白の部分は、緑を表示し それ以外の部分は 不透明度に応じて、異なる濃度で緑を表示します これを不透明マスクと呼びます では、Vキーを押して選択ツールを選択します 画像をクリックして選択し これを切り取るために、編集メニューから 「カット」を選択します この画像を、透明パネルで マスクにペーストして、緑の長方形に 不透明度マスクとして適用します 長方形を選択して プロパティパネルで「不透明度」を クリックすると、透明パネルが表示されますが 個別に表示した方が、マウスを離してもパネルが閉じず 作業しやすくなります このため、ウィンドウメニューから 「透明」をクリックします パネルでは左のサムネールに 選択した長方形が表示されます 右のボックスはマスク用で 左のアートワークを部分的に隠す画像が表示されます まず、「マスク作成」をクリックします デフォルトでは、黒のマスクが適用されます IllustratorとPhotoshopでは マスクの黒の部分は、下のコンテンツを隠すので 緑がまったく見えません 「クリップ」オプションをオフにして、マスクを白にすると 緑の塗りが見えるようになります ここで、先ほどの画像をマスクにペーストすると 画像の明暗に従って 部分的に緑が表示されるようになります マスクを編集するので、マスクのサムネールをクリックし 画像をペーストするために、編集メニューから 「ペースト」を選択します 画像をドラッグして緑の長方形の上に配置します この辺りでよいでしょう 画像で緑の長方形がマスクされました 長方形とマスクを同時に移動するには パネル左にある緑の長方形のサムネールを クリックする必要があります マスクのサムネールを 選択したままでは、マスクのみが 編集されることになるからです コンテンツをアートボードからドラッグすると 白は、下のアートボードのカラーであったことがわかります macOSではOptionキー WindowsではAltキーを押しながら マスクのサムネールをクリックすると マスクのみを表示できます 黒は緑を隠し、白は緑を表示し それ以外の部分は 不透明度に応じて緑が表示されます マスクの表示を終了するには 再度Option／Altキーを 押しながら、マスクのサムネールをクリックします マスクのサムネールを選択すると コンテンツの追加やサイズ変更など、必要に応じて 自由にマスクを編集できます マスクの編集を終えて次の作業に移るには パネル左のアートワークのサムネールをクリックします この状態で緑の長方形を移動すると マスクも一緒に移動します 緑の長方形のみを移動するには このロックアイコンをクリックして オフにすれば、それぞれを個別に移動できます マスクされた長方形をドラッグして 画面左にあるwebデザインの上に配置すると 緑に加えて、背景の青も見え ダブルトーン効果の完成です 今回は、数あるエフェクトの中からダブルトーン効果の 作り方をご紹介しました 次回、一味違った画像を 作りたいときは、ぜひこの方法をお試しください