キャリまが

ノースキル文系私大卒だった僕が30代で海外経験ゼロから英語を使う仕事に転職できたノウハウを発信!英語・会計資格の勉強法や、その他の雑記を綴るブログです。

iPadと無料アプリだけでフラットデザインのブログロゴ(ヘッダー画像)を作ってみた

4年目に突入した当ブログですが、これまでデザインには全く凝っておらず、ヘッダー画像なんかもそのままでした。

しかしここ最近、特にスマホでのユーザビリティやデザインをいろいろ改善してきました。
そしてついにヘッダー画像もオリジナルのものに変えたいという思いが強くなったため、簡単にフラットデザインが作れるアプリ「Assembly」を使ってヘッダー画像を作成してみました。

今回使用したアプリはこちらです。

Assembly - Art and Design

Assembly - Art and Design

  • Pixite LLC
  • 仕事効率化
  • 無料

 [目次]

 

無料アプリ「 Assembly」とiPadだけで出来るブログヘッダー画像の作り方

今回完成した画像がこちらです。

f:id:herpes_carrier:20171012115914j:image

どうですか?自分では結構気に入ってます。
こういうデザインってひと昔前ならAdobeのIllustratorで作るのが定番でしたけど、今ではiPadと無料のアプリだけで作ることが出来ます。いや〜凄いですね。ホントiPad mini買ってよかったです!

それでは、順を追って使い方を説明していきます。

 

新プロジェクトの作成

アプリを開くとこのようにライブラリが開きますので、まずNew Projectをタップして新しいプロジェクトを開きます。

f:id:herpes_carrier:20171012115955p:image

 

プロジェクトを作成したらまず左上のメニューから「Artboard」を開き、キャンバスの縦横比と背景色を選びます。

f:id:herpes_carrier:20171012120114j:image

 f:id:herpes_carrier:20171012120124p:image


背景には写真を選択する事もできます。
これらはプロジェクトの作成中にいつでも変更可能です。

 

Assemblyでの基本的な絵の描き方

Assemblyは、ペイントアプリのようにペンで線を描いて絵を描くアプリではありません。
あらかじめ用意された丸や四角、三角などの基本的な図形を組み合わせて絵を作っていきます。

このため今回のようにロゴを作るのには最適のアプリです。

プロジェクト画面では下にSticker、Shape、Text、Styleという4つのメニューが並んでいます。

 

Sticker

StickerはLINEののスタンプのようなアイコンがあらかじめインストールされています。あまり種類は多くないですが、追加で購入したり、自作して登録することが出来ます。

f:id:herpes_carrier:20171012120217p:image

 

Shape

Shapeは、このアプリの基本機能であり、丸や四角、三角などの基本的な図形を選んで配置することが出来ます。
今回は「キャリまが」のロゴと、ロゴ下の4つのアイコンをShapeの組み合わせで作りました。

 f:id:herpes_carrier:20171012120301p:image

f:id:herpes_carrier:20171012121807p:image

 

Text

Textはその名の通り、テキストを打ち込んで配置できます。

f:id:herpes_carrier:20171012121121p:image

 

フォントは英字は種類がありますが日本語のフォントは選べないみたいですね…。
ロゴ下の文字はテキストで作りました。大きさの他、左右揃え・中央揃え、文字や行の間隔も調整できます。

 

Style

Styleでは配置したシェイプやテキストの色などを変更できます。

f:id:herpes_carrier:20171012121141p:image


各シェイプには「Fill=塗りつぶし」と、「Stroked=枠線」、「Shadow=影」を設定することができます。
「塗りつぶし」は色と不透明度、「枠線」は太さと点線・実線、「影」は明暗と大きさ・影の方向も設定できますよ。

 

実際に作ってみる

実際にロゴを作っていきます。
シェイプの種類は限られていますが、組み合わせることでかなり複雑な形も作ることができます。
配置したシェイプは回転のほか、縦横比を固定したまま大きさを変更したり、タテヨコに伸縮させることが出来ます。

f:id:herpes_carrier:20171012120504j:image

 

今回は「ャ」の文字が若干苦労しました。角が丸い三角形というシェイプが用意されておらず、真円と長方形を組み合わせてなんとか思い通りの形を作ることが出来ました!

このように複数のシェイプがゴチャついていますが、グループ化することで1つのオブジェクトとして扱うことが出来ます。

f:id:herpes_carrier:20171012120717j:image

 

また、作ったオブジェクトはStickerとして登録して後から何度も使う事ができます。

 

上手に描くコツ

Assemblyはペンで線を引いて絵を描くワケでは無いため、直感的に描くというよりは、頭を使って描く必要があります。

そのため、まずは紙の上などに作りたい形をスケッチしてみることをオススメします。
スケッチを見ながら、「ここの形はどのシェイプを使えば作れるか」ということを考えます。
スケッチせずいきなりシェイプを並べてもいいですが、やはり作りたい形が先に頭の中にあった方が効率がいいと思います。

 

また、ネット上にはフラットデザインの画像が溢れてるので、そういった画像を眺めて全く同じ画像を自分で作ってみるのも勉強になります。

 

また、あらかじめインストールされているStickerはすべて、Ungroupすることでシェイプ単位に分解できるので、これによりシェイプの使い方を学んだり、シェイプを切り出して自分の作品で使用することが出来ます。

f:id:herpes_carrier:20171012122023j:image

f:id:herpes_carrier:20171012121540j:image

 

まとめ

こうして出来上がった画像は最終的にエクスポートで保存する事ができます。

いかがでしたでしょうか。
iPadと無料アプリだけでここまでできるなんて感動です!
使い方次第でかなり大がかりな作品も作る事が出来そうです。
これからもヒマを見つけてアイコンやアイキャッチ画像を自作していこうと思います!

 

スポンサーリンク