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

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

テキストにレイヤースタイルを設定していくだけで、ゲルっぽい透明感のあるテキストエフェクトをつけることができます。

前回とは別の方法でPhotoshopで写真をイラスト調に加工する方法のご紹介ですが今回は動画でその手順を残しておきたいと思います。youtube初公開です。

Photoshopで写真をイラスト化する方法は色々あると思いますが、PhotoshopのLabカラーモードを使って写真をイラスト風にする方法です。

Photoshop歴はかれこれ7年くらいになりますが、先日Photoshoをあまり知らない方から「Photoshopでこの部分を囲んで強調させたいんだけどできないの？」と聞かれて「illustratorではないのでちょっと出来ないですねー」と思わず答えてしまいました。まぁ選択範囲を取って、一旦塗りつぶして縁だけ残して中を抜くという方法はありますが、初心者の方には少々作業が煩雑で、illustratorとかOfficeソフト比べるとスマートではありません。ただ出来ないと答えたものの本当にそうなのか調べると簡単に出来るではないですか。こんなことも知らなかったと恥ずかしい思いをしたのでメモを残しておきます。

Photoshopの魅力はやはり何もないゼロの状態から創造できる所だと改めて思いますが、今回も何の素材もない状態からプロっぽい七色の抽象的な模様を描いていきます。

昼の写真を夜の写真に修正する方法です。全てこのやり方で出来るかは微妙な所はありますが、風景写真であればおおよそこのやり方で出来るのではないでしょうか。解像度が小さい写真ではAfterの夜写真が分かりにくかもしれませんが、Flickrに上げた写真を見ると違いがよくわかると思います。

Photoshopのグラデーションツールには、これはもう虹を描くために用意されたと思われるグラデーションが予め備わっています。そのツールを使用すればあっという間に虹を追加することができます。

この模様はなんと表現したら良いのかわかりませんが、Photoshopで抽象的な模様を作成する方法です。

くしゃくしゃにした紙をカメラで撮ってテクスチャにしても良いのですが、Photoshopでもその素材感を再現する事ができます。さらに、その上に文字を載せる場合、文字も含めてくしゃくしゃ感を出したいところです。今回はその二つのステップをご紹介します。 今回はPhotoshop Elementsで作成しましたが、他でもやり方は同じでいけると思います。

Photoshopで昼写真を夜写真に変える作業を行う上でPhotoshop（フォトショップ）で星空を描く必要があったためその作業手順を今回は残しておきたいと思います。

素材ゼロの状態からPhotoshopで満月を描く方法です。５分程度の作業で非常に簡単に作成することができました。試しにやってみてはいかがでしょうか。

一見すごいなと思うテキストエフェクトでも、実はレイヤースタイルを駆使すればそれほど難しくない場合もあります。今回のチュートリアルそんなテキストエフェクトの作り方です。

前回も投稿したHDR（ハイダイナミックレンジ）でプロっぽい写真に修正ですが、また別のやり方でHDR風な写真に加工をしてみた。もともとなんて事ない写真があっという間に良い感じに補正される様はハマりそうです。

HDR（ハイダイナミックレンジ）をご存知でしょうか？ハイダイナミックレンジとは、明るいところと暗いところを同時に階調を残して表現することができる写真の表現技法のことです。PhotoshopにはHDRトーンという機能がありますが、これを設定するだけであっという間に写真をプロっぽく仕上げる事ができます。

Photoshopでよく有りがちな雨を合成する方法です。

こちらも大してテクニックも時間もかからず作成できるPhotoshopのチュートリアルです。布生地っぽい質感がいい感じです。

風景写真でぼやっとした所謂眠い写真をPhotoshopで色補正する事でより魅力的に補正する事が出来ます。空はより青く、草木はより緑に補正する方法です。やり方はごくごく簡単です。

Photoshopでブラシを自作して写真に付け加えて仕上げていく方法です。

何も素材が無い状態からカラフルな背景を作る方法です。やり方は非常に簡単で特にテクニック的な事は必要としません。

Photoshopでメタリックロゴを作る方法です。多少手の込んだやり方ですが、その分良い感じになります。

何も素材が無い状態から抽象的な背景を作る方法です。やり方は非常に簡単で特にテクニック的な事は必要としません。素材無しの状態からこのようなものが作れるなんて改めてPhotoshopのすごさを実感している所です。

「特定色域の選択」を使って、空の青さだけを色調調整する方法です。

快晴の空に雲を追加する方法です。photoshopのフィルタメニューの「雲模様」を使用するかなり基本的な内容です。

海外の記事を参考にfacebookのアイコンをphotoshopで作る方法です。少し手間は掛かりますが、やってることは基本的なことの繰り返しでした。

Photoshopで写真をモノクロにする時は、単純に「彩度を下げればいい」と思っていましたが、実はそうではないらしいです。デザイナーの方々はチャンネルミキサーを使っているようで…知りませんでした。

Photoshopで木目調を作成する方法はいろいろとあると思うのですが、今回はあっという間に作れてしまう方法です。

もともと顔のツルツルのBabyが素材ですので少し解りにくいかもしれませんが、photoshopで顔を綺麗にする方法をメモしておきたいと思います。

Photoshopでさらっとテキストエフェクトを作成したいときに便利です。意外と簡単に出来ます。

Photoshopでテキストのレヤースタイルを設定するだけでプロっぽいテキストに仕上げることができます。数値を設定するだけで非常に簡単です。

写真にレトロな効果を付けるやり方です。Instagram風で付けるレトロな効果とよく似ています。

少しおしゃれな感じの背景を作るチュートリアルです。ただ楽しては出来そうにありません。少し手間がかかりました。

フォトショップでは様々な切抜きの方法があり、パスを使って切り抜くことが多いですが、髪の毛を切り抜く際、先端部分をパスで綺麗に切り抜くことは至難の業です。そんな時「チャンネル」を利用して切り抜きを行えば、髪の毛部分も自然な形で切り抜くことが出来ます。

photoshopでレイヤースタイルの設定だけでメタリックなフォントを書くことが出来ます。今回はゴールドです。こちらは、PhotoshopVIPさんの記事を実際に試させてもらった結果です。

photoshopでレイヤースタイルの設定だけでメタリックなフォントを書くことが出来ます。前の記事のようにエンボスをかけないやり方です。

photoshopでレイヤースタイルの設定だけでメタリックなフォントを書くことが出来ます。

photoshopでレイヤースタイルの設定（+α）だけでテキストエフェクトを仕上げます。

photoshopで写真に縁を付けて影を付けるやり方なのですが、少し手間をかければ、いい感じに仕上げることが出来ます。designwalkerさんのページを参考に作成しました。http://www.designwalker.com/2007/03/peeling.html少しやり方が違うところがありますが…

Photoshopでテキストのレヤースタイルを設定するだけでアクアっぽいテキストに仕上げることができます。数値を設定するだけで非常に簡単にプロっぽいテキストの完成です。

ページカールをよく見かけますが、より自然な感じに仕上げるにはどうすればいいのか…その手順をメモしておきたいと思います。

上の画像のような、ある程度パターン化されている素材であれば、photoshopを使って継ぎ目のないパターンを作成することが出来ます。※ある程度パターン化されていないと、うまくいかない場合もあります。

せっかくすごいフォトショップブラシをダウンロードしても単色使用ではいまいち。そんな時は、ベクトルマスクを使用して、グラデーションなどでブラシを表現してみてはいかがでしょうか？

フォトショップで上記のような帯状のリボンを作成したいと思いますが、使うテクニックはレイヤーマスクのみ。非常に簡単な作業で作成する事が出来ます。

国旗バッチをフォトショップで作成してみました。理由は新婚旅行で行ったので、その記念です。作成手順掲載します。（あんまり使いどころはないと思いますが…ボタン作成などに応用できるのはないでしょうか…）

風景写真に綺麗な空を合成したい時に、役立つのではないでしょうか。フォトショップで自然な雲を描く方法です。

タイトルだけではちょっと意味が分かりにくいですが、要は上の画像のようなものを、簡単に作る事が出来ます。ちなみに上の画像は今現在作成中のサイトですのでテキスト等多少追加しています。（まだ作成中なので、完成すれば公開したいと思います。）そんな訳で実際作成した手順をメモしておきたいと思います。

写真にちょっとした効果を付けて少しプロっぽくみせる方法です。太陽光線を写真に入れてみます。

海外のサイトを参考にテキストをネオンぽくしてみました。その方法をメモしておきます。

フォトショップでなかなか使うことのない「ノイズの低減」機能をご存知でしょうか？これを利用するだけで、そばかすフェイスも綺麗に変身。他にも多少修正は必要ですが…

非常に簡単な作業で、アクアボタンっぽいものが作成できます。ってことでやり方をメモメモっと。

高級感のあるサイトなどに人物を使用する際には、多少なりとも人物に加工が必要ですね。そんな時に一瞬で人物に高級感を与える方法をメモっておきます。

思わず押してみたくなるボタンってありますよね。細かい部分ですが、こういったボタンのデザインにもこだわっていきたいですね。そんな訳で、フォトショップで非常に簡単に思わず押してみたくなるボタンを作ってみましたので、その方法をメモしておきます。

フォトショップでテキストをちょっとおしゃれにする方法です。Tipsが紹介されているサイト（英語）がありましたので実際にやってみました。その手順をメモしておきます。このやり方を身に付けておくと様々なデザインに利用できそうですね。

よく見かけるリアルな人物画像。いったいどうやって描いているのかと常々気になっておりましたが、その方法が判明しました。初めて実践してみましたが何となくそれっぽくはなったので良しとします。でもこれは今後使えそうなテクニックです。（ちなみになぜリップスライムかは特に理由はありません。男前代表ということで（笑））

画像で色の一部分を変更したい！そんな時に役立つTipsです。フォトショップで、いとも簡単にで色の置き換えをすることが可能です。

フォトショップのものさしツール使っていますか？これまでなかなか使う機会のなかったものさしツール。それが意外に便利な使い方があります。それは、画像の傾きを一瞬にして直してくれるというもの。写真を撮った時や、スキャナで画像を取り込んだ際、画像が傾いていることが多いですよね。そんな時にものさしツールが役に立ってくれます。

楽してプロっぽいデザインの極みです。自分で作らなくてもサイトにアクセントを加えるブラシなどが大量に配布されております。自分でデザインするのも勿論楽しいですが…ていうかそれがやりがいの部分ですが（笑）でもこういうツールを使うのも便利で楽できます。

海外のサイトですが、Photoshopでグラフィックを制作する手順を紹介してくれているサイトです。少し難解な部分もありますが何だか役立ちそうです。

英語なんでちょっと難解な部分もありますが何とか分かる範囲かなって感じです。私も何となくフォトショップで画像を加工してみました。（なんだかよく分からなくなってしまいましたが…）

上のようにPhotoshopで画像の端をめくれた感じにする方法を紹介します。定番な加工なんで、やり方を身につけておくべきでしょう！方法を紹介してくれているサイトがありました。それは…

プロっぽく見せる一番簡単な方法はこういったブラシなどを利用してサイトにアクセントを加えてやること。一気にプロっぽいデザインに仕上げることができます。

Photoshopの本を買わずともこういったサイトがあるとWeb制作の幅が広がりますね。

ここまでクオリティの高いブラシがあれば、使用するだけでプロっぽいデザインに見せることが可能です。

こういった無料で配布してくれるサイトがあれば、自分でデザインする必要がなくなってきますね（笑）

ブラウザ上でPhotoshopとほぼ同等の作業が可能です。これでどこでも画像加工が可能ですね。

ちょっとした画像の加工や装飾などはこのサイトでも十分対応できそうです。まさにPhotoshopいらず！Photoshopの立ち上がり遅いですからね…