痛Suica・痛ICカードをデザインする

アニメを中心に幅広く痛Suicaにしていきます。様々なICカードのテンプレートも配布。※個人利用の範囲でお願いします。商用利用は一切許可していません。

10<< 123456789101112131415161718192021222324252627282930 >>12

痛Suica製作グッズ

定番のホワイトステッカー
保護フィルム付き


何度も貼り直せる吸着タイプ
定期に最適!保護フィルム付き


本格使用のメタリックステッカー
保護フィルム付き


角を綺麗に切るのに必須のツール
あるとないとでは大違い!


お手頃価格の工作マット


カッターに干渉しない金属定規
滑り止め付きの優れもの


定番のデザインナイフ
替刃付きでお得!


切り取り時に抑えるためのテープ
ずれを防ぎます!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Twitter用のグラデーションアイコンの作り方 前編

iPhoneアプリの「色影」と「合成写真」を使って高度なグラデーションアイコンを作る方法を紹介します。(前編)

Twitterのアイコンはその人の「顔」であり、目を惹くアイコンはTLを流して読んでいてもぱっと目にとまります。
なのでせっかくなら目立つ、自分だけのアイコンが作れたらとても楽しいんじゃないかと思って記事にしてみました。
はっきり言って、グラデーションのアイコンは目立ちます。


irokage.jpg   gousei.jpg
   色影 - Hokuson          合成写真 PhotoLayers for iPhone - handyCloset Inc.

色影」は画像にグラデーションをかけてスタイリッシュな画像に加工できるアプリです。これ単独でもグラデーションはかけられるのですが、調整がなかなか難しいのが欠点です。threshold(しきい値:どの濃さまで残すか)のパラメーターが1つしかないため、値を下げると線が薄く、値を上げると塗りつぶされたものになってしまい、画像によってはどう調整してもうまくいかないものもあります。背景がある画像だと更に困難を極めます。
下図の左が元画像、中がthresholdが50%程度、右がthreshold80%程度の画像です。

IMG_60701.jpgIMG_60721.jpgIMG_60711.jpg



せっかくいいアプリだし、もっと綺麗にできないかと考えて思いついたのが「異なる濃さのものを重ねる」ことです。
そこで登場するのが「合成写真」です。ではやり方を説明していきます。
おおまかな順序としては、
・「合成写真」で必要ない部分を透明にする。
・「色影」でグラデーションをかける。
・「合成写真」で重ねる。
と割と単純です。

先ほどのあかり画像でやるとこのようになります。もっと違う色でやった方が効果がわかりやすかったかな、
と少し後悔。まぁいいか。
2012102822454792.png


さて本題。
今回はゆるゆりの歳納京子の壁紙を使ってみました。画像は大きいほど綺麗にできます。当然か。
wp7000_B_b.jpg

このままだと、リボンと背景上部が混ざって綺麗なグラデーションは作れません。
なのでまず、背景を消します。

「合成写真」を起動し、「追加」から画像をレイヤーとして追加します。
IMG_6019.png

画像を選択すると「画像切り取り」画面になります。欲しいのは京子の所だけなので、京子に合わせてサイズを調整し「完了」します。比率はなんでもいいです。
イメージ 1

画像が貼られたら、次に京子の周りの部分を消していきます。下部の左から3番目のアイコンを選び、続いて「消しゴム」を選択します。
20121028223232887.png   20121028225655444.png

「消しゴム」画面では、いらない部分を透明にすることができます。

「自動」:選択した場所と、その周辺の近い色の所を透明にします。
「色」:画像全体で色が近い所を透明にします。
「手動」:拡大しながらちまちま透明にします。
「修復」:間違って消した所を戻せます。
「拡大」:拡大したり縮小しながら画像の状態を確認します。
左下のアイコン:透明になった背景を白や黒にして確認できます。
パラメーター:どの程度同じ色まで消すかの程度を調整します。
「取消」:今の操作なし
「再度」:いややっぱあり

デフォルトでは「自動」になっていて、まずはこれを使って周辺を透明にします。京子左の白い部分を選択すると京子の左部分が透明になりました。画像の上には拡大された小窓があるので、どこを選択しているのかを確認しながら透明にできます。
IMG_6021.png

さてここで、下のパラメーターを調整してみましょう。
上の画像では「1」でした。これを「99」にした画像が下のものです。
IMG_6022.png
あらやだ、肌まで透明になってしまいました。このパラメーターはいわゆる「しきい値」で、値を上げることで「同じ色」と認識する範囲を広げたせいです。「1」のときの画像を見てみると、髪の左部分に少し背景が残っているのがわかりますね。

これを調節し、「消したい部分をとことん消し、消したくない部分は残す」値を見つけます。
今回の場合はこのくらいのようです。ほとんど白い部分が消えました。
「色」で消した場合も操作は同じです。
IMG_6023.png
この調節は、「自動」と「色」で透明化したその都度調節する必要があります。めんどいですが。
ただ、背景の色が薄い場合は周囲に背景が残っていてもそれほど気にしないで大丈夫です。グラデーションをかけたとき、薄ければ消えてしまいますので。

さて、おおまかな透明化ができたので、次は細かい箇所です。
「拡大」で拡大しながら「手動」を使います。
左下のボタンで背景を白と黒に変えて確認しながら消し残しのないよう丁寧に消していきます。
「手動」の時のパラメーターは「太さ」です。あまり小さい値だと反応しないようです。
IMG_6024.pngIMG_6025.png

困難の末、京子だけの画像が完成しました!
フォトショ顔負けの綺麗な輪郭!
IMG_6026_20121029001317.png

そそくさと保存しましょう。
左から2番目のアイコンを選択し、「配置」「実際のサイズ、画面中央」を選択します。
画像自体の劣化を防ぐために、「実際のサイズ」であることが重要です。
20121029001042373.png


そして上部アイコンの「保存」、保存形式を「JPEG」にして「カメラロールへ保存」を選びます。
「PNG」で保存すると透明な部分は透明なままで、「色影」では「黒」と認識されて塗りつぶされるので不可です。
素材としてとっておく分には「PNG」で保存すると他にも使いまわせて楽しいかもしれません。
IMG_6033.png

さて、ようやく京子のみの画像が完成しました。
IMG_6034.jpg

ずいぶん長くなってしまったので、記事を分割します。
次回はグラデーションから合成までです。

後編はこちらから

関連記事

COMMENT▼

コメントの投稿


管理者にだけ表示を許可する

TRACKBACK▼

http://yusunippa.blog89.fc2.com/tb.php/166-21aa06f9

この記事にトラックバックする(FC2ブログユーザー)

 | ホーム | 

カウンター

各種テンプレートはこちらから

YouTube

LINEクリエイターズスタンプ

LINE着せかえ

store_thumbnail_201606102341477df.png store_thumbnail_2016050422481945d.png store_thumbnail.png store_thumbnail_2016061023451100b.png

タグクラウド


ニューリリース

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。