きになるnet - きになるものを綴ったブログ

iPhone・MacからWordPressなどのWebに関することまで、きになるものを綴ったブログ

Tips

Pixelmatorで紙が浮いたような効果を付ける方法

投稿日:2012.09.03 更新日:

right-float-menu

right-float-menu

いろいろなサイトでよく見かける、紙の端が少し浮いたエフェクトを使ってみたいと思い、Pixelmatorのチュートリアルを探しましたが見つからなかったので、試行錯誤しながら作ってみました。
Pixelmatorを使用して、紙が浮いたような効果を付ける方法のご紹介です。

Pixelmator
Pixelmator 2.1
Pixelmator - Pixelmator Team
価格: ¥1,300
(記事公開時の価格のため、購入時はよくお確かめください)
カテゴリ: 写真
App Storeで詳細を見る。

 

 

 ※ここでは、Pixelmator2.1での方法を紹介しています。

方法 

1.サイズを設定

今回は、サイドバーのタイトルバック等で使えそうな感じの大きさを紹介したいと思います。
まず、Pixelmatorを開き「新規イメージを作成…」を選択します。

Pixelmator-1

ここでは、幅300px、高さ30pxの長方形を基準にするのですが、影の部分が下に伸びるための余白を考えて、幅310px、高さ50pxで設定しました。
ここはお好きなサイズに設定して下さい。 

pixelmator1

現在は100%の画面が表示されていますが、「表示」→「ズームイン」で拡大した方が作業をしやすいです。

Pixelmator2

pixelmator3
次に、今回の大本になる長方形を作成していきます。

ツール右下の「シェイプ」→「長方形」を選択します。

次に下図の塗りつぶしのところをクリックすると、塗りつぶすカラーの指定ができます。
カラーは、図のように#665e53というように16進数で指定したり、従来通りのパレットやイメージ等から指定ができます。

pixelmator4

個人的には、16進数で指定するのがおすすめです! 
原色大辞典さんのサイトで探した色が、16進数で表記されているので作業がスムーズにいきます。

長方形は、最初適当に作っておいて後から調整するやり方をしています。
最終的に幅300px、高さ30pxになるよう調整します。
この時、「表示」→「ルーラを表示」もしくは 「グリッドを表示」にしておけば、作業をやり易いと思います。

pixelmator5

次に、影部分の長方形を作成します。
先程と同じように、「シェイプ」→「長方形」を選択し、幅は先程の半分以下の135px、高さは少し小さめの25pxになるようにします。
最終的に角度を変更するので、突き抜けない程度の大きさにしました。 

pixelmator6

pixelmator7
作業をする際、重なって見にくい場合はレイヤーの右のチェックをはずすと、はずしたレイヤーが隠れますので見やすくなります。

※この後の作業は、「シェイプ」レイヤーのチェックをはずした状態で説明しています。

 

 

2.影部分の角度調整とエフェクト処理

次に影部分にエフェクトをかける準備をします。
まず、このままではエフェクトをかける事ができませんので、シェイプをピクセルに変換します。

pixelmator8

上図のようにシェイプ上で副ボタンのクリック(右クリックや2本指クリック)で「ピクセルに変更」を選択するか、メニューバーの「レイヤー」→「ピクセルに変更」の選択のどちらかをとります。

ピクセルに変わったかどうかは、シェイプのアイコンで確認する事ができます。

pixelmator9

ピクセルになる前は青色の長方形をしていますが、ピクセルになると左図のように塗り潰した色に変わります。

ピクセルになれば、画面左上の歯車マークをクリックし、変形を選択し、角度を変更します。 

Pixelmator10

下図の辺りに0°と書かれたところがありますので、その横の矢印で角度を調整します。
直接0°のところに数値を入れてentryをしても数値は変わります。
ここでは、5°ぐらいにしていますが、色々と試してみて下さい。
角度が決まれば、右上の「OK」を必ず押して下さい。
押さないと反映されません。 

Pixelmator11

次に影部分にエフェクトをかけます。
メニューバーの「表示」→「エフェクトを表示」を選択します。 

pixelmator12

pixelmator13するとエフェクトブラウザが開きますので、ドロップダウンリストから「その他」を選択し、その中の「かすみ」を選択します。

※ドロップダウンリストが「すべてのエフェクト」になっていても探すことができます。

 

 

下図のように「かすみ」というエフェクト画面が出てきますので、スライダを左右に動かして、かすみの加減を調整します。
いい具合にかすませたら、エフェクト画面右下の「OK」をクリックします。 

pixelmator14

3.影部分を重ね合わせて、最終調整

次に、チェックをはずしてした「シェイプ」のレイヤーのチェックを入れると下図のようにシェイプ2(影部分)が上にくるはずです。
これだとまずいので、シェイプ2(影部分)をシェイプの下に持ってこなければなりません。 

pixelmator15

シェイプ2をドラッグして、シェイプの下に持って来てドロップすると、シェイプの下にシェイプ2(影部分)がくるようになります。

pixelmator16

あとは、シェイプ2(影部分)を微調整すれば完成です。

Pixelmator17

※背景を透明にして、.pngで保存することをお勧めします。

以上、Pixelmatorで紙が浮いたような効果を付ける方法でした。

Pixelmator
Pixelmator 2.1
Pixelmator - Pixelmator Team
価格: ¥1,300
(記事公開時の価格のため、購入時はよくお確かめください)
カテゴリ: 写真
App Storeで詳細を見る。
mixhost
当ブログは、MixHostで運営中です!
おすすめ記事

-Tips
-

Copyright© きになるnet - きになるものを綴ったブログ , 2018 All Rights Reserved.