忍者ブログ
管理人がどうやってオンライン小説サイトを作っていったのか、その実体験によるノウハウや悪戦苦闘の日々をつづるWEB小説制作日記ブログです。 ちょっと変わった独自システム付きのネット小説サイトを運営しています。
[82]  [81]  [80]  [79]  [78]  [77]  [76]  [75]  [74]  [73]  [72
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

以前の記事で、サイトを作るために必要な「Web素材」を用意する方法の1つとして「素材集を利用する」という方法を挙げました。
 
(関連記事>自作サイトの作り方~WEB素材を用意する~
 
しかし、素材集に載っているものが「クオリティーは高くて良いんだけど、サイトのイメージコンセプトに 少し合わない」ということがあるかと思います。
 
なので、今回はそんな素材のイメージをちょっと変えるために「画像加工ソフトPhotoshopを使って素材集の素材をアレンジする方法」を取り上げたいと思います。
 
これをするためにはまず「その素材集が加工OKな素材集であるかどうか」(あと、そもそもWeb利用OKかどうか)を確認しておいてください。
 
(もしくは、そもそもその点を確認してから素材集を購入してください。)
 
それと、これはあくまで管理人が独学で編み出したアレンジ術ですので、世の中にはもっと便利でやりやすい方法もあるかも分かりません。
 
また、管理人の使っているPhotoshopは少々古いかも知れませんので、最新のものとは細部が異なっている可能性があります。
 
(それとPhotoshop画面のスクリーンショットを載せて良いものかどうかコンプライアンス的によく分からないので、その辺は文字だけで説明しています。スミマセン…。)
 
以上の点を踏まえ、あくまで参考程度にご覧ください。
色を変えてみる
イメージを左右するものの1つとして「色」という要素は重要です。
 
また、1つのWebページを組み立てるのに1つの画像素材だけでは足りませんので、そんな素材と素材を組み合わせる際に「絵はいいんだけど、この色とこの色では合わない」ということが出てくると思います。
 
そこで使えるのが、素材の色を変えるテクニックです。
 
まず、見本として自分が使っている素材集の素材から3つのパーツ素材をピックアップして「色はそのままで縮小しただけ」のサンプルを用意しました。
   

 
3つの素材はそれぞれ別々のレイヤーになっています(←ここ地味に重要です)。
 
(使用素材集は「和の風物詩素材」←クリックorタップで素材集一覧ページ(外部サイト)へジャンプできます。)
 
これの色を変更するには、まず変更したい素材の載ったレイヤーを選択し、Photoshop上部のメニューから「イメージ」→「色調補正」→「カラーバランス」を選びます。
 
すると「シアン――レッド」「マゼンタ――グリーン」「イエロー――ブルー」という3つのカラーバランスのゲージが出て来ます。
 
初期値では真ん中に設定してあるツマミをそれぞれ左右に動かすことで、色が変えられるようになります。
 
たとえばこの素材の場合「マゼンタ――グリーン」のツマミを「グリーン」側に動かせば、色が緑っぽくなります(「イエロー――ブルー」を「イエロー」側に動かすと、さらに良い感じの緑になったりします)
 
他にも「シアン――レッド」を「レッド」側、「マゼンタ――グリーン」を「マゼンタ」側に動かすことで紫がかった色になったり…。
 
元の素材の色によっては思うような色を出せないこともありますが、全体的に色の雰囲気を変えたい時に結構使えるテクニックかと思います。
 
ちなみに上記の方法で緑っぽくしたのが下の図の真ん中の風鈴、紫っぽくしたのが右側の風鈴です。
 
左側の風鈴は色はそのままで「イメージ」→「色調補正」→「明るさ・コントラスト」で「明るさ」だけちょっと明るく変更しています。
   


輪郭の雰囲気を柔らかくしてみる
画像素材の「輪郭線がくっきりし過ぎていて、ちょっと硬い感じがする。もっと柔らかくしたいな」ということがあると思います。
 
そんな場合にはレイヤースタイルを使ってみてください。
 
加工したいレイヤーを選択した後、上部メニューから「レイヤー」→「レイヤースタイル」→「光彩(内側)」を選びます。
 
これをすると、輪郭の内側にほのかに光が当たったような効果を出せます。
 
いろいろ項目が出て来てややこしいかと思いますが、各要素のツマミを動かせば実際に光の強さなど変わっていきますので、画像を見ながら調整して、「OK」をクリックすれば良いのです。
 
実際3つの素材それぞれにレイヤースタイル(光彩・内側)を適用したのが下の図です。
   
一部に光を当ててみる
画像にちょっと立体感(光の当たっている感じ)を出したい時には「オーバーレイ」が使えます。
 
まず、描画色に「白」を選択し、ブラシツールを選択。
 
ブラシの種類を、ぼやけた感じの適当な大きさのものに設定します。
 
そして新規レイヤーを1番上に作成し、こんな感じで適当にちょん、と丸を描いていきます。 
(色が白なので、分かりやすいように背景色を黒に変えてあります。)
   


描き終わったら、そのレイヤーの描画モードを「オーバーレイ」に変更してください(初期だと「通常」に設定されているかと思います)。
 
すると、こんな感じに仕上がります。
   

最初の見本と比べると、だいぶ雰囲気が変わったのではないかと思います。

拍手[0回]

PR
ブログ内検索
ブログ更新&チェックについて。

このブログは管理人に時間の余裕がある時にちょこっとずつ更新していく予定ですので、更新やチェックの頻度はおそらく数週間に1回~下手をすると1ヶ月以上の間が空いてしまう可能性も…。
もし更新が滞ったり、コメントくださって返事がなくても「あぁ、仕事が忙し過ぎて時間が無いんだな」と気長にお待ちいただければ幸いです。

ブログもくじ
ブログ記事一覧

(サイトと連動して作ったこのブログのもくじです。手動更新のため、最新記事などは入っていない可能性が高いです。)
管理人プロフィール
HN(ハンドル・ネーム):
津籠睦月(つごもりむつき)
職業:
社会人(毎日PCを使う仕事。残業も休日出勤も普通にあります。)
趣味:
小説・HP制作、読書、猫と遊ぶこと。
好きな小説ジャンル:
ファンタジー、冒険、恋愛、青春、推理、濃い人間ドラマの展開するモノ。
備考:
漢検2級(準1以上は未受験)。国語の最高偏差値80(高2時点)。

オリジナルのWEB小説サイトを運営しています。
猫好きです。
HPにも小説内にも気づけばあちこちに猫が…。
各種WEBサービス公式リスト
↑ 下部のURL( twitter.com/i/… )をクリック(タップ)でリストが表示されます。
webサービス不具合情報
参加ポータルサイト

人気ブログランキング
参加しているポータルサイト(ランキング)です。
相互RSS
アクセス・カウンター
小説サイト「言ノ葉ノ森」関連Tweetまとめ
P R
忍者ブログ [PR]