Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

Photoshopで画像をモザイク処理してドット絵のように仕上げる方法

Photoshopで画像をモザイク処理してドット絵のように仕上げる方法

Photoshopで画像をモザイク処理してドット絵のように仕上げる方法

Photoshopのフィルター機能のモザイクを利用して画像をドット絵のように仕上げる方法です。youtubeに操作の流れを公開しています。

動画でも手順を解説http://youtu.be/0U1pCJL5cd8

Photoshopで画像をモザイク処理してドット絵のように仕上げる方法

モザイク処理
before写真
こちらが元写真です。

モザイクの値を5pxに設定
画像にモザイクをかける上のメニューより「フィルター」「ピクセレート」「モザイク」を選択し、ここでは値を5pxにしておきます。(元画像の解像度によって値は任意で調整したほうが良いかもしれません。)
塗りつぶすドットを作成
ドットを作成手順1の作業とは別に、新たにファイルを新規で作成します。サイズは5px✖️5pxにします。この5px✖️5pxの中にシェイプツールより白い円を描きます。

ドットを作成
作成したら、上のメニューの「編集」「パターン定義」よりパターン登録しておきます。登録したら、こちらのファイルは閉じます。
ドットを塗りつぶし
ドットを塗りつぶし手順2で作成した白い円を、手順1で作成した画像に塗りつぶします。
レイヤー新たに追加し、上のメニューから「編集」「塗りつぶし」を選択し、手順2で作成したパターンを選択します。

結果、以下のようになります。

ドットを塗りつぶし完了
黒で塗りつぶし
レイヤー新規作成し、選択範囲反転後、黒で塗りつぶしの設定
レイヤー新規作成し、選択範囲反転後、黒で塗りつぶしの設定
レイヤーを新規で作成しておきます。次に手順3で作成した、レイヤーをCtrlを押しながらレイヤーをクリックします。すると、白い円部分の選択範囲を取ることができます。上のメニューより「選択範囲」「選択範囲の反転」を行い、新規で作成したレイヤーを黒で塗りつぶします。
調整
最後に、手順3で作成したレイヤーを非表示にして、手順4で作成したレイヤーの透明度を調整すれば完成です。
完成
完成

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

コメントを投稿

Name:
Mail:
URL:
この情報を登録しますか?

Photoshopで画像をモザイク処理してドット絵のように仕上げる方法の前後の記事

前の記事は「これは使える!ネット上でPDFのデータ容量を約1分で劇的に圧縮できるサイト

次の記事は「FacebookのLikeBoxが表示されないと思ったら2015年6月23日で終了していた。

関連する情報

              

楽してプロっぽいデザイン|Forty-n-FiveBlog ホームへ戻る

検索

最近のエントリー

カテゴリー

月別アーカイブ

タグクラウド

管理人紹介

ポートフォリオサイト|Forty-N-Five

フィードを取得

フィードを取得する

スポンサードリンク

運営SHOP

健康美人30代から始める美と健康は、MovableTypeを使用して制作した通販サイトです。

健康美人30代から始める美と健康 もてもてSHOP NOLOOKS 和彩

元気をくれた本

「夢をかなえるゾウ」この本に出会えて良かったとホントに良かった思います。Webには関係ないですが、これからの人生を楽しくしてくれる本です。ガネーシャどうもありがとう(笑)

Copyright Forty - N - Five. All rights reserved.