マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン WEB制作

簡単レシピ!アメコミ風デザイン素材と活用法!!

投稿日:2014年8月18日 更新日:

今回はアメコミ風のデザインを作るときに役立つフリー素材と活用法をご紹介いたします。

まずは実際のアメコミを見て、簡単に特徴を分析してみます。
アメコミでgoogle画像検索をかけると、、、


01

とってもカラフルですね!

・力強い輪郭線
・派手めな原色
・ドットやシャドウの装飾

などが、アメコミの特徴かなと個人的に思います。

それでは早速…

02

この男性の写真をアメコミ風にデザインしてみましょう!

(1) 輪郭線をつくります。

04

詳しい方法は以前の記事でご紹介させていただいておりますので、今回は割愛いたします。

輪郭線の作り方

05

背景を明るめの黄色にしてみます。

イメージだいぶ変わりましたね!

続いて…

(2)アメコミ素材でデコレーション

http://www.freepik.com/index.php?goto=74&idfoto=713840

http://www.freepik.com/index.php?goto=74&idfoto=718294

06

今回は↑のアイテムをチョイス!

07

だいぶ、アメコミ感でてきたかと思います。

08

さらに雰囲気を出すためにコマ的な要素を追加します。

03

完成…です!!
何がOKなのか分かりませんが、間違いなく最初の写真よりもテンションあがりましたね。

02

before

03

after

コマを増やし、ストーリー調にすると、さらにコンテンツに面白味を与えると思います。
ご活用いただけたら幸いです。

アメコミ風素材

http://www.freepik.com/free-vector/comic-book-page-vector-free-download_718293.htm

http://www.freepik.com/free-vector/comic-book-page-free-graphics_718295.htm

http://www.freepik.com/free-vector/mushroom-cloud-of-the-comic-style-dialog-box—-vector_584643.htm

http://www.freepik.com/free-psd/psd-comics-bubbles-pack_567998.htm

http://www.freepik.com/free-vector/simple-comic-bubbles-set_714388.htm

http://www.freepik.com/free-vector/simple-comic-bubbles-set_714388.htm

http://www.freepik.com/index.php?goto=74&idfoto=718294

http://www.freepik.com/index.php?goto=74&idfoto=713840

http://www.ac-illust.com/main/search_result.php?word=%E3%82%A2%E3%83%A1%E3%82%B3%E3%83%9F

-WEBデザイン, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

画面いっぱいに背景写真を敷くWEBデザインが流行っている今日この頃、 見栄えのする写真を探すのもなかなかの一苦労だったりしますよね。 そんな悩めるデザイナーさんたちにオススメしたい、高クオリティな写真 …

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

今まで角丸のデザインにするには画像を背景に設定したりしていましたが、 幅や高さが変わるとそれに沿った画像を作成しなくてはならない場合があります。 それだと効率も悪く、修正もしづらいためコーディングが大 …

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

以前ご紹介しました面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!の応用編になります。 前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラ …

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

本日はクリスマス、また一年の終わりが近ついてきましたが、 皆さんはいかがお過ごしでしょうか? サイトのデザイン制作に入る前に、よくWEBデザインギャラリーサイトで同じ業種やジャンルのサイトを参考してか …

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。 このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウト …