読者です 読者をやめる 読者になる 読者になる

SACHILOG

Travel, Design, Baby, and My Life.

MENU

【初めてのイラストレーター】ウェブ用バナーをつくってみよう。

超初心者向け。初めてIllustratorを使う人向けの、バナーの作り方を解説していきます!

ちなみに、イラストレーターデータのことを拡張子から、「aiデータ」と言ったりします。

初期設定

「新規」(左側)

①ファイルの保存名

②縦と横のサイズ

③単位(ウェブはpixels、図面などはmm)

④カラーモード(ウェブはRGB、印刷物はCMYK

 

②に、作りたいバナーなどのサイズを打ち込む。上のSizeのところから、A4などを選択することもできる。もしここで指定しない場合は、以下からもサイズ変更可能。

 

「ドキュメントのセットアップ」(右側)

①「Document Setup」をクリック

②「Edit Artbords」をクリック

f:id:sachiyosuedomi:20170428003817p:plain

 

すると、白枠(アートボード)が点線になるので、右上のW(横幅)とH(縦幅)を入力して、サイズ変更ができる。

 

f:id:sachiyosuedomi:20170428083056p:plain

 

ワークスペースを整える

Windowからよく使う項目を選び、自分のワークスペースをつくろう。

 

バナー制作に最低限必要な項目。

・Character

・Color

・Transparency 

・Layers

・Stroke

・Align

・Links

f:id:sachiyosuedomi:20170428003702p:plain

左側のツールは、必ず必要なので、「Window→Tool」をクリックして、出しておこう。

 

f:id:sachiyosuedomi:20170428094752p:plain

 

バナーを作ってみよう!

文字について

「文字ツール」でテキストを打ち込む。そこから、好きなフォントやサイズなどバナーのテイストに合わせて選んでみる。

 

①フォント

②サイズ

③行間

④横幅

⑤文字間

 

TABIPPOでよく使うフォント

ポップでちょっと凝った感じになるので、文字にアクセントをつけやすいのでおすすめです。

f:id:sachiyosuedomi:20170428094818p:plain

上から...

あさご本丸ゴシック

ほのかアンティーク角

ニコ角

マキノス

全部フリーフォントなので、DLしておこうー!

 

画像配置&レイヤー

使いたい画像を入れよう。

「File→Place」から画像を選んで、差し込むか、「ドラッグ&ドロップ」で入れることができる。

f:id:sachiyosuedomi:20170428095451p:plain

その時の注意点として...

例えば、デスクトップにあった画像を持ってきて、その画像を消してしまうと、aiデータを次に開くときにデータ内の画像も消えてしまう。フォルダに移動させた場合や名前を変更した場合も同じです。(デスクトップにある、○○という名前の画像を引っ張ってきていて、紐付けされているイメージ)
なので、事前にフォルダをつくってそこに入れて置くか、画像をリンクとしてデータに埋め込んでしまう方法があります。(これはのちほど説明します) 

レイヤーの入れ替え

画像を足すと、先ほど打った文字の上に重なってしまって、文字が見えなくなります。なので、レイヤーの順番を入れ替えて、画像を一番下に動かしてください。

 f:id:sachiyosuedomi:20170428095051p:plain

ちなみに、目のマークをクリックすると、非表示にできます。

色をつける

 「Color」から色を選択できます。色には、「塗りと線」があって、この場合だと、青色が線、白色が塗りの状態です。

f:id:sachiyosuedomi:20170428083253p:plain

 

外形線の色と、その中の色を選ぶことができます。なので、同じ色を選ぶと、文字が少し太く見えたりするので、強調したい時などは塗りと線両方に色をつけます。

stroke / 線

f:id:sachiyosuedomi:20170428083449p:plain

もっと太くしたい時は、「stroke→weight」から、線の太さを変えることが出来ます。

 

f:id:sachiyosuedomi:20170428094731p:plain

ただ、そのまま太くしていくと、線が太すぎて塗りが見えなくなってしまうので、塗りと線を同じ色にして好きなだけ太くした後に、違う色で少し線を細めにした同じ文字を重ねます。そうすると自由に線と塗りの幅をつくことができます。これも結構私が使ってる技です。

 

transparency / 透明度

f:id:sachiyosuedomi:20170428083459p:plain

透明度を変えることで、画像に馴染ませることもできます。「transparency→opacity」で、透明度が変更可能です。

 

vector画像

色は形を変えられる画像データ。(旅祭ロゴ)

 

f:id:sachiyosuedomi:20170428083522p:plain

ダブルクリックして選択をすると、色や透明度などを変更できます。

f:id:sachiyosuedomi:20170428123600p:plain

 

こういうのもvector画像。色などを変更できる。TABIPPOでは、shutterstockからダウンロードしてきて使うことが多いです。

f:id:sachiyosuedomi:20170428123341p:plain

リンク

「Link」から、オレンジ丸の詳細表示をクリックする。

f:id:sachiyosuedomi:20170428123820p:plain

「Embed Images」をクリックして、画像を埋め込みするとアイコンが表示されるので、埋め込み完了です。

f:id:sachiyosuedomi:20170428123822p:plain

埋め込みをする理由としては、上記の「画像配置について」で説明した通り。デメリットとしては、データが重くなります。なので、理想は埋め込みをせずにフォルダにしっかりまとめること。

保存方法

バナーなので、web用に保存します。

「File→Save for Web」

f:id:sachiyosuedomi:20170428124908p:plain

①「jpg」を選択

②サイズの確認(このサイズで書き出されます)

③「Clip to artboard」にチェック

→Save をクリックで、保存!

f:id:sachiyosuedomi:20170428124808p:plain

完成!

以上でバナー完成です!!!

f:id:sachiyosuedomi:20170428130840j:plain

 

写真を大きくしたり、文字配置を変えるだけでも印象は変わります。

f:id:sachiyosuedomi:20170428124824p:plain

 

レベル上げていって、文字にグラデーションをつけたり、vector画像を入れ見たりレベルアップしていきましょー!

便利なショートカット

この変はバナー制作で便利なショートカットキーなので覚えておきましょう!他にも検索したら山ほど出てくるので調べてみてね。

 

+ + : 拡大

+ - : 縮小

+ 0 : アートボード全体を表示

+ G : グループ化

+ Shift + G  : グループ化

+ C : コピー

+ V : 貼り付け

+ F : コピーした場所に貼り付け

+ Shift + ] : 最前面へ

+ Shift + [ : 最背面へ

+ 7 : クリッピングマスク

+ Option + 7 : クリッピングマスク解除

+ S : 保存

 

バナー制作で上達するには

とにかくたくさん作る。作るときに、良さそうなバナーをマネして制作するのがいいです。ちょっとしたポイントとしては、

・文字の大きさや色にメリハリをつける

・色は3色以上使わない

・四隅な隙間を揃える

まずはこの3つを意識してつくりましょう。

 

 

インフルエンサーを目指して、本質を忘れてしまわないようにしよう。

f:id:sachiyosuedomi:20170419094949p:image

 

高校の頃から授業でアート作品をつくって、大学でもつくり、常に何かを形にしたり発信をしたい気持ちがあった。

 

だけど、自分の考えや想いをたくさんの人に知ってもらうのは中々難しかった。発信する力がなかった。

 

最近はSNSを皆が使うようになり、フォロワー数が多いインフルエンサーと呼ばれる人も増えた。SNSを上手に使って認知度を上げたり存在を知ってもらう手段としては最強だと思う。

 

インフルエンサーに憧れて、フォロワーを増やしたり、フォトジェニックな写真を撮ってリア充な雰囲気をSNS上につくりあげる人はいっぱいいる。

 

自分も多くの人に見てもらいたいと思う。それでお仕事が出来るようになったらいいなと思う。ただ、キラキラしている自分を見て欲しいという気持ちではなく、自分の伝えたいことを広めるには、多くの人にまず自分の存在を知ってもらうのが大事だから。

 

いくらいい物をつくっていても、見てくれる人、評価してくれる人に届かなければ、ただの自己満で完結してしまう。

 

でも、なんだかSNSにとらわれてる気がして、更新をやめてしまうことがある。ポチポチフォロワーを増やしてみたり、せっせと自分らしい写真を作り込んでみたりすると、あれ?これがやりたいことだっけ?ともやもやしてくる。

 

認知度をあげる手段としてはいいことだけど、自然体な自分が置き去りになって、本末転倒してしまう。本質を忘れがちになってしまう。

 

伝えるのは周りに向けてだけど、常に向き合ってまず見せるのは自分。

 

自分に素直に、正直にやっていきたい。

<振り返り>ママデザイナーが2017年やりたい100のこと

f:id:sachiyosuedomi:20170417232344p:image

 

今年の始めに、やりたい100のことを書き出しました。

もう4月になったので、どれくらいできてるか振り返ってみました。

 

hellosachiyo.hatenablog.com

 

2017年やりたい100のこと

仕事編

1. デザインの仕事をする

 →現在ロゴ制作のお仕事やっています(今度名刺もやる予定!) 

2. デザインのイベントに出る 

 →未定。夏までに企画します。

3. 旅のイベントに出る

 →未定。夏までに企画します。

4. 写真の仕事をする

 →未定。最近はよく子供の写真撮ってます。

5. ロフトとイベントをする

 →7月頃にTABIPPOでやる予定!!

6. fablabとイベントをする

 →夏に企画したいな。

7. 英語の仕事をする

 →イベント登壇します!詳細はこちら。

tabi-daigaku.jp

8. スペイン語の仕事をする

 →未定。何ができるかな〜。

9. チリ関係の仕事をする

 →チリのことならいくらでも語れます。18年間住んでました。

10. 商品撮影を定期的にする

 →先週した!次は5月!

11. 社内の季節イベントを行う

 →今年はメンバー全員の誕生日をお祝いするよ!最初はナナのお祝いしました♡

12. ワークショップイベントを行う

 →未定。これも夏までに企画!

 

...4/12達成

旅編

13. 家族3人で海外旅行へ

  →未定。今年行けるかな〜。

14. 家族3人で国内旅行へ

  →5月に沖縄行きます!

15. 旅の写真をまとめる

  →前のPCとHDのデータは写した!

16. 海外で買ったモノを販売する

  →先ずはチリのアクセサリーを販売します。

17. 海外で買い付けをする

  →自分は行けないけど、そう行った仕組みを作りたい。

18. 旅先で写真をまとめる

  →今年のものはプリントアウトをしよう。

19. 旅写真を飾る

  →家族での写真は飾った!

20. チリのことを定期的に発信する

  →できてない。やろう。

21. 温泉旅行へ行く

  →これは冬だな。

22. まだ行ったことない県に行く

  →沖縄〜〜〜!!!

23. 屋久島へ行く

  →この夏行きたいな。

...7/23達成

自分編

24. ブログを週1で更新する

  →できてない。けど三日ぼうずではないので、のんびり続いてはいる。

25. 自分のブランドを立ち上げる

  →これはやります。

26. 自分ブランドのロゴをつくる

  →やらねば。

27. ブランドで5万以上稼ぐ

  →早くブランド始めなさい、自分。

28. 本を月1冊以上読む

  →できてない。

29. 5キロ痩せる

  →産後太りが。。。1キロだけ痩せた。

30. カメラの使い方を勉強する

  →できてない。けど定期的に撮ってる。

31. 写真の勉強をする

  →できてない。

32. メイクを上達させる

  →できてない。ファンデーションをちゃんと使えるようになりたい。

33. 巻き髪をできるようにする

  →たまーにやってる。新しいアイロンが欲しい。

34. 三つ編みをできるようにする

  →ちょびちょび練習中。

35. 女性系の検診へ行く

  →行けてない。誰か一緒に行こう。

36. 定期的にヨガをする

  →たまに朝ヨガやってる。もっとやろう。

37. 死ぬまでにやりたい100のことを書き出す

  →まだ。

38. 行きつけの店を見つける

  →行きつけのケーキ屋さんは見つけた。

39. お弁当を持参する

  →最近できてない。

40. 料理の腕をあげる

  →毎晩作ってるので上がってきたかな!

41. キーマカレーを作れるようになる

  →おすすめレシピ募集中。

42. ネイルを上達させる

  →夏に向けてやろう。

43. 人生計画を立てる

  →自分のと家族のを作りたい。

44. お気に入りのジーパンを見つける

  →まだ。

45. エプロンを買う

  →買った!お気に入り!

46. 会いたい人リストをつくる

  →まだ〜。

47. 30歳への自分に手紙を書く

  →後3年後か!

48. 麦わら帽子を買う

  →買った!夏が待ち遠しい!

49. マラソンに出る

  →エントリーせねば。

...14/49達成

デザイン編

50. プチアニメーションをつくる

  →GIF動画は作った!

51. イラストを週1で描く

  →毎日ぺぽ描いてる!

52. イラストレーターのスキルアップ

  →毎週スキルアップ中!

53. フォトショップスキルアップ

  →毎週スキルアップ中!

54. ペンタブを使いこなす

  →この間久々に使ったけど慣れない。

55. fabでものづくりをする

  →会社ロゴ作るよ!

56.レーザーカッターを定期的に使う

  →できてない。ものづくりしたい。

57. 3D写真の作品をつくる

  →プレゼントするやつ作らなきゃ。

58. ファボコンテストに参加する

  →できてない。

59. ピアスををつくる

  →fabで作りたい。

60. 指輪をつくる

  →ピンキーリングとかがいいかな。

61. カリグラフィーを上達させる

  →ちょびちょび書いてる。

62. チョークアートをできるようにする

  →週1で描きたい。

63. 水彩画をはじめる

  →まだはじめてない。

64. アクリルで絵を描く

  →まいどんのイラスト見たいの描きたい。

65. 自分で描いた絵を飾る

  →まず描きましょう。

66. オリジナルの名刺をつくる

  →ななと作る。紙もいいのがいい。

67. マイPCカバーをつくる

  →fabで作る。

68. 将来の家族へ手紙を書く

  →何年後にしようかな。

69. 普段使うものに刺繍をする

  →刺繍ブーム終わった。。。笑

...20/69達成

家族編

70. お金を貯める

  →貯めれてない。やばい。

71. 結婚式の準備をする

  →とりあえずプランナーさんに相談しているところ。

72. 子供の写真をアルバムにまとめる

  →まだ。やります。

73. チェキアルバムを完成させる

  →徐々に更新中。

74. 海外移住計画をする

  →立てます。

75. 家族計画を立てる

  →立てます。

76. 家族写真を部屋に飾る

  →飾った♡いい感じ!

77. 季節のイベントを行う

  →お花見したいいいい

78. 誕生日にケーキをつくる

  →つくれなかった。。

79. 両親を食事連れていく

  →できていない〜〜。

80. 子供の成長動画をつくる

  →まとねば。

81. 定期的に家族写真を撮る

  →撮ってる!!!

82. 部屋を可愛くする

  →シンプルな部屋のまま。。

83. お揃いの服を着る

  →まだ買えてない。

84. 1歳誕生日のお祝いしっかりやる

  →どんなのにしようかな〜。ハーフBDはやった!

85. 家族お箸つくる

  →まだ。

86. 家族の似顔絵を描く

  →まだ〜。

87. 都庁の展望台に行く

  →行ったよ!ぺぽは興味なさげだったw

88. まわる動画を5か所以上で撮る 

  →明日桜の前で!

...25/88達成

遊び編

89. 5回以上サーフィンへ行く

  →5月に第一弾いくよ!

90. スノボーで雪を満喫する

  →満喫した!スノボー楽しかった。

91. イルミネーションを見に行く

  →行けてない。冬だね!

92. 子連れキャンプへ行く

  →キャンプ仲間募集中。

93. 久しぶりに乗馬をする

  →夏かな。

94. いちご狩りに行く

  →行った!めちゃ美味しかった!カマケンありがとう!

95. 流れ星を見る

  →冬に一度粘ったけど、見れなかった。

96. トランポリンで遊ぶ

  →まだ遊んでない。

97. アイシングクッキーをつくる

  →作ってない。

98. 猫カフェで癒される

  →あいかと行こうかな。

99. SUPヨガをする

  →さっぷやりたい。

100. ひまわり畑で写真を撮る
  →この夏山梨で!

 

...28/100達成!

 

甘くみて、28個達成してます。

これを100達成するのと同時に、ひとつ一つの目標に対して精度を上げたいです。

 

次の振り返りは、6月か7月ごろかな。

写真で10ヶ月が形になる、マタニティフォト。

写真は記憶と思い出を残してくれる。

 

ずっと撮りためてきたマタニティフォト。

ようやく形にしました。

  

f:id:sachiyosuedomi:20170413224726j:plain

 

GIF動画にしてみてもいい感じ。

 

f:id:sachiyosuedomi:20170329232820g:plain

 

長い期間をかけてできる思い出。

その一瞬を切り取るのも好きだけど、こうすると数枚の写真で10ヶ月が形になる。

 

次はどの時間を形にしようかな。

 

新社会人の皆さんへ。懲役40年なんてウソ、仕事は楽しいです!

f:id:sachiyosuedomi:20170403213749p:image

 

新社会人おめでとうございます!新生活さぁスタート!という時期なのに、ツイッターでは「懲役40年」のワードがトレンド入り。

 

社会人=自由がない、仕事がつまらない

という印象があるみたい。

 

でも、社会人は楽しいです!仕事楽しいです!今年の4月から、育休を終えて仕事復帰するのですが、久々に仕事出来るのが楽しみで仕方がなかったです。

 

自分が好きなデザインと旅の仕事をしているのですが、育休中も仕事のやりとりだけを見て、新しい案件や企画など携われないのがもどかしかった。

 

今働いてるTABIPPOでは、自分で時間をコントロールしていいよという制度があります。

 

 先日の社長のツイート。

 

 

 

 こんな会社なかなかないと思います。

 

働きやすさのために、一人一人が考えて行動をする。今すぐ仕事をしなくても、時間を調整すれば、仕事が回ることだってたくさんあります。事前の連絡や後からフォローをするなど対応をしっかりすることを前提に、「信頼関係」があるから成立している仕組みです。

 

何がなんでも出社する、といった暗黙のルールや、有給はなんだか使いにくい雰囲気など、そんなもの自分たちがつくった見えない牢屋。

 

「自由」とは、好き勝手にやることではなく、「自分で時間をコントロールすること」。

 

うちの会社は特殊だけど、自分でどう自由な時間をつくるかも大切だし、どんな仕事を誰とするかも大切。

 

仕事をして、新しいことを学んだり、挑戦したり、自分が働いたことによって感謝されることもある。ありがとうって言ってもらえてお金がもらえるなんて最高だと思う。

 

世の中お仕事いきたくなーい、つまらーーんって言ってる人だけではないです。もっと自分が楽しい!そんなやりたいことをやってる人たちといるのは楽しいし、一緒にいて頑張ろうって気持ちも湧いてきます。

 

やりたいことがない人は、一緒に仕事をしたい人を見つけたらいい。尊敬できる人を探したらいい。人と人で仕事をするのだから、一緒に働いていて楽しい!と思う人と仕事をするだけで、この先の働き方への思いも変わってくると思います。

 

育休を終えて、働くお母さんになる嬉しさと寂しさ。

4月から、フルタイムで仕事復帰します!

ぺぽさんは保育園に通い始めるので、一緒に入れる時間が減ります。寂しい〜。でも仕事をまたできる嬉しさもあったり。

 

働くお母さんになる嬉しさ

元々仕事は好きで、妊娠前も好んで夜遅くまで仕事をしたりしていたいので、働けないことに対してうずうずしていていました。

 

仕事のやりとりを社内ではslackでしていて、育休中もメッセージが飛び交うのを見てはいたので、こんな案件を始めるんだ、新しい制作が始まったなどと見ていました。面白そうなことに自分が関われないの対して置いてけぼりな感じたりもしていました。

 

それがやっと自分も参加できる!そんな嬉しさがあります。

働くお母さんになる寂しさ

生まれてから、ずっとずっと一緒に過ごしてたので、一緒の時間が減るのは寂しい。泣きじゃくったり、自分の時間が作れなかったり、もうやだ〜なんて思うこともあったりするけど、それでも可愛いなって思うのです。

 

まだ1歳にもなってないのに、保育園に通ってもらうことに少し罪悪感も感じたり。

家で掃除や洗濯、ご飯を作ったりなどの家事をしている間はかまってあげれないので、保育園にいってる方が友達も増えるし、先生たちがたくさん遊んでくれる。だから実は、その方がお互いにもいいんだよね、と自分で自分に伝えてます。

 

その分家で過ごす時間はお休みの日はいっぱい遊んで笑顔な日々にしたいです。

 

朝ののんびり幸せタイム

育休中は時間があるので、朝起きてまずは布団でごろごろする1日が始まります。寝起きは機嫌がよくて、布団でゆっくりと過ごしていました。そんな時間もなかなかつくれなくなるのかな。

 

カメラ目線が得意で、インカメ好きなぺぽとよく自撮りをしてました。

 

そんな自撮り写真をまとめたよ。

 

f:id:sachiyosuedomi:20170328175428j:plain

 

家族っていいね。

 

f:id:sachiyosuedomi:20170328183132j:plain

 

f:id:sachiyosuedomi:20170328183112j:plain

f:id:sachiyosuedomi:20170328183153j:plain

 

ちゃお。

 

保育園受かった

本日、区役所から、「保育園受かりましたよ」の電話がありました。祝!

 

それにしても、保育園に受かる、落ちるって表現おかしい気がする。

 

早く待機児童問題が解決されるといいな。多くのお母さんが受かりますように...!

 

f:id:sachiyosuedomi:20170220175853j:image

 

4月から仕事頑張ります。