creatersnest132

何かと便利!モザイクのエフェクトチュートリアル20選


モザイクは何を目的としてモザイクをかけるかによります。
伏字や隠す目的が代表的ですが、デザインとして使用することも出来ます。
モザイクの形を変えたり、タイル状にモザイクを貼ったりと多彩です。
まずはモザイクのエフェクトチュートリアルを載せているサイトをご紹介します。

目次

フォトショップで簡単に画像にぼかしやモザイクを入れる方法

douga

http://zakio01.com/bokasi-mozaiku-3629

動画でわかりやすくぼかしとモザイクの入れ方を説明をしています。
動画なのでとてもわかりやすいです。

 

【モザイク】Photoshopで画像に目線や修正を入れる方法1【ぼかし】

neta_mesen_mosaicba

http://retamame.com/neta_mesen_mosaic
モザイクとぼかしの入れ方を説明しています。
境界線の処理の仕方もあります。

 

意外と便利!Photoshopで顔写真にモザイクをかける方法 | TechAcademyマガジン

eyecatch-20140501_2

http://techacademy.jp/magazine/2160
複数を選択してモザイクをかけるやり方を説明しています。
モザイクの他にぼかし、ガラスの効果もあります。

 

Photoshopでモザイクをかける3つの方法 | デザイン五輪書

pink

http://デザイン.biz/photoshop-mosaic/
境界線もギザギザになるモザイクの掛け方。
スマートフィルターに指定してからの説明です。

 

きれいなモザイクのかけ方 – Photoshop 編 –

84813daf1b03682c02475017772cf08f

http://a.know-how.fc2.com/ja/7727/
境界線もギザギザになるモザイクの掛け方。
選択範囲をレイヤーコピーし別でモザイクをかけています。

 

Photoshop Elements9でモザイク加工する

Photoshop-Elements9でモザイク加工する5-300x291

http://toolmania.info/post-529/
Photoshop Elementsでの作り方。
Elementsは入手しやすいVerなので紹介します。

 

【デザイン】photoshopを使って写真を流行の三角形モザイクに加工する方法

mosaic11

http://applision.com/introduction/18154/
三角形のモザイクの掛け方。
画像を入れてとてもわかりやすく説明しています。

 

アートイベント 万国學生藝術展覧祭 | Photoshopチュートリアル!印象的なモザイクの作り方をご紹介

p0
http://www.gakuten.jp/create/tutorial-ps-mosaic

三角形のモザイクの掛け方。
學展ブログより1つ1つ画像入りで説明がありわかりやすいです。

 

ずっと使える!?スタイリッシュなモザイクを作成するPhotoshopチュートリアル 

eye_catch1

http://chibinowa.net/
三角形のモザイクの掛け方。
微調整の仕方もあります こちらもわかりやすく説明してます。

 

Photoshopでレイヤーマスクを使ったモザイク効果を作る方法 / ウェブデザインライブラリー

ps_20073_11

http://www.webdesignlibrary.jp/2011/05/pixel-effect.php
レイヤーマスクを使うモザイク。
オーバーレイで別画像を重ねて雰囲気を出しています。

 

【覚書】フォトモザイクの作り方[photoshopチュートリアル]

e5908de7a7b0e69caae8a8ade5ae9a-12

https://designer84023.wordpress.com/2015/03/26/【覚書】フォトモザイクの作り方photoshopチュートリア/
よくある表現手法がとっても簡単。
写真を沢山並べ一枚の絵に見える作り方。

 

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

20150306_12

http://forty-n-five.boy.jp/blog/2015/03/photoshop_44.php
最初にモザイクをかけモザイクの大きさを決める。
パターン登録をしてから塗りつぶし→選択→選択反転で塗りつぶして表現しています。

 

画像を巨大なディスプレイに映し出したようにするPhotoshopのチュートリアル

2010030204

http://coliss.com/articles/build-websites/operation/design/photoshop-tutorial-jumbotron-effect.html
同じくドットのモザイクですが よりネオンっぽく見えます。
2階調化の画像もあります。

 

可愛いドットモザイクを作るチュートリアル | Cubix

dotmosic_04

http://chibinowa.net/notebook/ps/dotmosic.html
パターンを作成しマスクをかけてからモザイク。
好きな大きさのパターンを作れば大きさも変えれます。

 

【photoshop入門、画像加工編】写真をドットモザイクに加工する方法!

704

http://k1blog.com/web/tutorial/post-2656/
こちらはカラーハーフトーンをモザイクとして利用しています。
選択範囲指定→フィルター→ぴくせれーと→カラーハーフトーンで出来ます。

 

Transform a Photo into a LEGO Block Piece of Art in Adobe Photoshop – Tuts+ Design & Illustration Tutorial

LegoBlockArt_FinalProduct-revised

http://design.tutsplus.com/tutorials/transform-a-photo-into-a-lego-block-piece-of-art-in-adobe-photoshop–cms-20568
LEGO風モザイクの作り方。英語のサイトです。
LEGOのパターンを作成し別レイヤー一面LEGOにしオーバーレイで被せます。

 

フォトショップ 使い方マニュアル パターンでモザイク風画像

1185797464

http://h-matsuda.com/photoshop/index.php?ID=5
画像にモザイクとしてパターンを被せる作り方。
パターンを作成し方眼目を作りランダムに塗りつぶし。

 

Photoshop:モザイク模様

91104_201008111316454211_191104_201008111316454211_291104_201008111316454211_3

http://tarchu.diarynote.jp/201008111316454211/
ノイズ→水晶→モザイクの順で作っています。
水晶を荒く設定するとよりモザイクに近くなります。

 

みんなの教室 – Photoshop : エッジのモザイク処理

tropical_fish

http://e-class.jp/modules/news/article.php?storyid=33
画像のエッジ部分がモザイクにする作り方。
絵画の様にして見せる方法。

 

SkitchがついにiPhoneにやってきた!しかもモザイク機能付き!

skitch_for_iphone06

http://delaymania.com/201209/app/skitch_for_iphone/
アプリでも参戦!簡単にモザイクが出来ます。
無料アプリなのでお手軽。

 

まとめ

今回ご紹介したモザイクの種類でも多彩にあります。
モザイクは隠すだけでなく、その効果をデザインの一部として利用するとより色んな表情が出てきます。
モザイク=四角でなくても良いのです。
モザイク=タイル貼りという考えでみると、よりデザイン性が広がると思います。

本サイトが運営するWebデザインのオンラインスクールが公開中! まずは無料トライアル!

NESTonline - テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール (詳細はこちら)-
好きなときに、好きな場所で、好きなだけ学べる。テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクールを運営しています。
PhotoshopやCSS、実践的なWebグラフィックデザインなど、500レッスン以上の数十万円相当のプロを目指すカリキュラムが、月々2,500円でいつでもどこでも学べます。

Photoshopを動画でしっかり学ぶ


shirodomi

ライター初心者

Next ArticleWebサイトを見る人の視線の動きを知って制作に活かそう!