イラストレーターでシームレスなパターンを作ろう

皆さまごきげんよう。
厳しい残暑が続いておりますがですがいかがお過ごしでしょうか?まだまだ日中は暑いとはいえ日の入りが早くなってきて、季節は着々と秋に向かっているのだなぁ..と嬉しいような寂しいような今日この頃です。

さて、本日はイラストレーターでシームレスなパターンを作ってみようと思います♪
“イラストレーターでシームレスなパターンを作ろう” の続きを読む

LINEスタンプの作り方 作成編

インターネッツの皆さまこんにちは!
前回に引き続き、今回はLINEスタンプ作成編をお送りします。
これからスタンプを作ってみたいな〜と思っている皆さんに、少しでもお力になれるといいなと思っております(^^)♪

今回はスキャンしてPCへ取り込んだ画像をフォトショップとイラストレーターを使って仕上げていきます。
使用ソフトは Photoshop cs6、Illustrator cs6 です。
前回の準備編はこちら
“LINEスタンプの作り方 作成編” の続きを読む

LINEスタンプの作り方 準備編

2月以降の申請分からクリエイターへの報酬の分配パーセンテージが現在の50%から35%に引き下げになるとのことなので、かねてから温めていた(というか忘れてた)ラフ画を1月中に申請まで漕ぎ付けるべく、新年早々一気に仕上げに入りました。
ε=ε=ε=ε=┏(; ̄▽ ̄)┛

とりあえず申請時に作品の見れるURLがあれば審査の短縮になるそうなので、取り急ぎ制作過程をUPします!
“LINEスタンプの作り方 準備編” の続きを読む

svgアニメーションで動くロゴを作ってみよう

インターネッツの皆さまこんにちは。
2014年もあとわずか、ということで今年勉強したことなどを振り返りつつ、自分的に押さえておきたい項目を改めて記しておきたいと思います。

本日は、今じわじわ来てるSVGを使った表現方法をひとつやってみたいと思います。
こちらが今回作成したロゴです。まずはご覧ください。線と塗りをそれぞれアニメーションさせています。

☆svgのロゴ DEMO

SVGアニメーションで動くロゴを作る

使用するソフト:イラストレーター
css3でアニメーション設定

それでは順を追って作り方を説明いたします。

1.イラストレーターでロゴを作成する

テキストツールで文字を書きます。フォントは少し太めの方がいい感じに仕上がるかも。

2.テキストをアウトライン化する

テキストを選択して右クリック>アウトラインを作成します。
outline_03

3.SVGコードを取得

ファイル>別名で保存>ファイル名を付けたら保存するファイル形式をSVG(svg)を選択します。
(SVG圧縮(svgz)は圧縮ファイルですのでファイルサイズが1/3くらいに軽くなりますが、テキストエディタで編集出来ないのでここではSVG(svg)を使います。)
svg(svg)_03
“svgアニメーションで動くロゴを作ってみよう” の続きを読む

写真からアイコン画像を作る

この間のブログで触れました、アイコンの重要性。

自分が何者であるかを知ってもらうには、やはり写真を使うのが一番!なのですが..
自分の写真をさらすのには抵抗がある、という方も多いと思うのです。私もそんな一人。

そこで、フォトショップとイラストレーターを使って、
写真からスタンプ風のイラストを作ってみようと思います。
こちらのサイトからフリー画像を拝借致しました。使用ソフトはCS3です。

1.フォトショップで写真加工

写真をフォトショップで開いたら、レイヤーの複製をしておきます。
Pic0
複製したレイヤーを、彩度を-100にして白黒写真にします。
Pic1
ここでハッキリ線を出したい部分等ありましたら
焼き込みツールでなぞって濃度を濃くしておくと良いと思います。

次にレベル補正で、白黒の濃淡をハッキリさせます。
Pic2
これを、web&デバイス用に保存します。JPEGでもPNGでもGIFでも何でもOKでしょう。
“写真からアイコン画像を作る” の続きを読む