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

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

09<< 12345678910111213141516171819202122232425262728293031 >>11

痛Suica製作グッズ

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


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


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


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


お手頃価格の工作マット


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


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


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

スポンサーサイト

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

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

長くなってしまったので、こちらに引き続き記載していきます。

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

前編はこちら

使うアプリはこちら、「色影」と「合成写真」です。
irokage.jpg   gousei.jpg
   色影 - Hokuson          合成写真 PhotoLayers for iPhone - handyCloset Inc.

さて、前編では使いたい画像の背景を消しました。
次はグラデーションをかけ、それを合成します。
色影」を起動し、左下の「NEW」から先程作成した画像を選択します。
IMG_6035.png
電池が死にそうですが気にしません。

また、下準備として、画像の余計な部分を切り落としておくといいかもしれません。
余白が小さい方が欲しい部分の色の変化が大きいため、綺麗に見えます。
この操作は「カメラロール」の「編集」から「トリミング」で周辺を切ってもらえばいいです。

色影」の主な操作は以下の通りです。
「color」:色を選択する。8つまでカスタムで登録しておける。
「config」:「THRESHOLD(しきい値)」、「REVERSE(反転)」、「DIRECTION(縦か横か)」「SMOOTH(滑らか)」
「PAINT」:塗ったり、消したりできる。
「SAVE」:保存

ではグラデーションの画像を作成します。
まず「color」から好きな色を選びます。今回は上を黄緑色、下を水色にしてみました。
次に「THRESHOLD(しきい値)」です。
このパラメーターを左にするほど薄く、右にするほど濃くなります。
下図の左と右と比べて見るとよくわかると思います。
パラメーターを真ん中あたりにした場合と、右の方にずらした場合の画像です。
IMG_6037.jpgIMG_6038.jpg
左の画像は線は綺麗にでていますが、色がついている部分が少ないため、インパクトの小さい薄い画像になってしまいます。右の画像はべたっとなりすぎて気持ち悪いですね。口から何か出ています。

ですがとりあえずこの「線が綺麗な画像」と「べたっとした画像」を「SAVE」より保存しておきます。

次に「合成写真」を起動します。
前編の最初の操作と同じように、「追加」から2枚の画像をレイヤーとして追加します。
そして2枚とも「配置」「実際のサイズ、画面中央」にてサイズと配置を調整します。
IMG_6039.pngIMG_6040.png

さて次に、左部分の画像が並んでいる所から濃い方の画像を選ぶと、濃い方がレイヤーの上にきます。
そして下部の真ん中のアイコンを選ぶと「透明度」「明るさ」「コントラスト」「彩度」を調整する画面になります。
20121029012810505.png

ここで「透明度」を左にずらすと…!
IMG_6041.pngIMG_6042.png
なんかすでにそれっぽくなりました!

ここまでくれば後は簡単。
自分の好きなように「透明度」「明るさ」「コントラスト」「彩度」を調整してください。
上部アイコンの「確認」から画面全体を確認できます。
IMG_6043.png

では保存しましょう。
前編同様、「保存」から保存してください。このとき、「PNG」と「JPEG」のどちらでもかまいません。
IMG_6044.jpg

さて最後です。
Twitterのアイコンは正方形なので、画像が長方形だと歪んで表示されてしまい、顔が細くなったり太くなったりして愉快になります。
それを避けるため、ちゃんと正方形に切り取りましょう。
これは「カメラロール」から画像を表示し、「編集」から「スクエア」を選択して「トリミング」してください。
IMG_6045.png

長い道のりでしたが、完成しました!
IMG_6044_20121029015141.jpg

これを応用すると1枚の画像を分割してグラデーションをかけたり、複数の画像の色違いのグラデーションを合成したりもできます。
IMG_6049.jpg20121029015416457.jpg
他にもまだまだできると思いますので、ぜひ皆さんにもやってみてもらいたいところです。

長くなりましたが、お疲れ様でした。


スポンサーサイト

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

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

後編はこちらから

痛Suica ゆるゆり 歳納京子

yuruyuri22.png
関連:ゆるゆり京子タオル

痛Suica 魔法少女まどか☆マギカ 暁美ほむら

madokamagica23.png
関連:まどか☆マギカポスターカレンダーほむら

痛Suica 魔法少女まどか☆マギカ 鹿目まどか

madokamagica22.png
関連:劇場版まどかマギカひざ掛けストラップ

 | ホーム |  »

カウンター

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

YouTube

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

LINE着せかえ

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

タグクラウド


ニューリリース

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