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

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

05<< 123456789101112131415161718192021222324252627282930 >>07

痛Suica製作グッズ

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


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


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


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


お手頃価格の工作マット


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


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


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

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
他にもまだまだできると思いますので、ぜひ皆さんにもやってみてもらいたいところです。

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


関連記事

COMMENT▼

コメントの投稿


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

TRACKBACK▼

http://yusunippa.blog89.fc2.com/tb.php/167-961084cd

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

 | ホーム | 

カウンター

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

YouTube

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

LINE着せかえ

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

タグクラウド


ニューリリース