1月
26

【iPhone】ダウンロードボタンを増産したよ♪

IMG_6344

iPhoneのアプリだけで、ダウンロードボタンを増産しちゃいました♪

Macで作業しなくても、iPhoneだけでここまでできちゃうとはすごい!
と目から鱗でした(゚д゚)!

iPhoneって、本当にすごいなって感じました(*´艸`*)♡

参考にさせて頂いたサイトさま◎

ありがとうございます*\(^o^)/*

iPhoneだけでアプリのダウンロードボタンを作ってみた! | happy081115’s Blog

このようなリクエストも頂きました(^^;;
調子に乗って記事を書く事にしました(∀`*ゞ)エヘヘ

まずは、フリー素材のダウンロード

前述のサイトさまにならって、こちらからボタンをダウンロードしました。

FreeButtonWeb – Search Free Buttons & Web Button Download

iPhoneからダウンロードしたので、「GoodReader」アプリを使いました。

ZIPファイルを解凍して、カメラロールに保存します。

Button-15
Button-15 Photo by mayo1950

GoodReader for iPhone
GoodReader for iPhone App
カテゴリ: 仕事効率化
価格: ¥450

「Textforce」で文字を入力します。

ここで、一昨日書いてる記事が生きてくるというわけです(笑)

Textforceでフォントがいろいろ設定できた! – iPhoneとマヨテキメモ

「Textforce」で、ボタンに入れたい文字を入力します。

Textforce-1
Textforce-1 Photo by mayo1950

フォントの設定をします。
文字サイズは、最大の48を選んでいます。
書けたら、スクショを撮ってカメラロールに保存します。

Textforce-2
Textforce-2 Photo by mayo1950

「Markee」を使って画像のトリミング

ここで、「Markee」に登場してもらいます*\(^o^)/*

良く使ってます。画像の編集や文字いれとオールマイティですね♪

Markee App
カテゴリ: 写真/ビデオ
価格: 無料

先ほどのもじの画像をトリミングします。

Markee-1
Markee-1 Photo by mayo1950

トリミングできた画像のスクショを撮ります。

Markee-2
Markee-2 Photo by mayo1950

ボタンに文字を追加する

こちらのアプリを使いました。
今までこんなアプリがあるのを、知らなかった(^^;;

合成写真 PhotoLayers for iPhone App
カテゴリ: 写真/ビデオ
価格: ¥85

まず背景をタップして、カメラロールに保存したボタンを選びます。

Button-1
Button-1 Photo by mayo1950

次に、レイヤーにTextforceで作ってスクショを撮った文字画像を追加します。

Button-2
Button-2 Photo by mayo1950

消しゴム機能を使って、自動で文字以外のいらない部分を透明にします。

Button-3
Button-3 Photo by mayo1950

残った細かい部分は拡大して、消しゴム機能を手動で、ケシケシします。

でもこれがなかなか上手くできなくて、何回もやり直しました(-“-;www

Button-4
Button-4 Photo by mayo1950

ボタンと文字を合成して、出来あがったのが、これです!

Button-5
Button-5 Photo by mayo1950

文字だけを保存できます。

折角苦労して作った文字なので、保存できたらいいなと…

そしたら、なんと文字だけでも保存する事ができました♪

これで、使いまわしができるというものです!

Button-16
Button-16 Photo by mayo1950

文字だけをpng画像として保存しました。

Button-17
Button-17 Photo by mayo1950

ボタンのリサイズ

ダウンロードしたボタンの高さがあり過ぎて、太っちょさんになってる (꒪⌓꒪)

そこで、このアプリの登場です!
前述のサイトさまで、紹介していますけど、
アプリを探してくるのも凄いと感心してます!

縦横と別々に、細かく設定できるんです!

Resize Photo App
カテゴリ: 写真/ビデオ
価格: 無料

Button-9
Button-9 Photo by mayo1950

リサイズしたい画像を選びます。

Button-6
Button-6 Photo by mayo1950

鍵のマークをタップして、開けます。

Button-7
Button-7 Photo by mayo1950

高さを変更しました。

これでよければ、できた画像を保存します。

Button-8
Button-8 Photo by mayo1950

簡単にテキストを入力できます。

ここでまた、合成写真のアプリに登場してもらいます。

背景で、ボタンを選んで

Button-11
Button-11 Photo by mayo1950

これでよければ、完了。

Button-10
Button-10 Photo by mayo1950

次に、追加からテキストをタップします。

Button-12
Button-12 Photo by mayo1950

フォントサイズやカラーをえらんだり、中央揃えなど選択できます。

フォントは、日本語の手書き風がありましたし、
英語は、結構種類が豊富でした。

Button-13
Button-13 Photo by mayo1950

調整したら、出来あがり!
これは、簡単ですね♪

Button-14
Button-14 Photo by mayo1950

アプリダウンロードボタンが、うじゃうじゃできた!

いろいろ、試しに作ってみました♪

いろいろなアプリを使って、作る過程が楽しかったりする私でごじゃります(笑)

Button-18
Button-18 Photo by mayo1950

Button-19
Button-19 Photo by mayo1950

Button-20
Button-20 Photo by mayo1950

Button-21
Button-21 Photo by mayo1950

Button-22
Button-22 Photo by mayo1950

Button-23
Button-23 Photo by mayo1950

この他に使ったアプリ

画像を横並びに連結するのに使いました。
これができる幸せ(*´艸`*)♡

ImageKit App
カテゴリ: 写真/ビデオ
価格: ¥100

画像や文字の段落を入れ替えるのに、使いました。ほんと便利だわ!

Rowline App
カテゴリ: ビジネス
価格: ¥250

いつも愛用のエディタアプリ

DraftPad App
カテゴリ: 仕事効率化
価格: 無料

Posted from するぷろ for iPhone.

【こちらの関連記事もご覧ください】


記事をお読み頂き、ありがとうございます!

記事の内容を気に入って頂けましたか?
もし気に入って頂けましたら、
ソーシャルボタンで共有頂ければ、とても嬉しいです♪


follow us in feedly RSS

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This blog is kept spam free by WP-SpamFree.