Mendako's Blog
~携帯ショップで働いてます~
シーライクス

【シーライクス体験談part1】携帯ショップ店員がPhotoshopでバナー制作に挑戦!!

こんにちは。めんだこです☆

わたしは新卒で携帯ショップに入社してアラサーの今までずっと携帯ショップ店員として働いています。

でも、携帯業界の将来性やこのままずっとこの仕事を続けていくことに不安を感じるようになったので、副業を始めたり、転職や独立を視野に入れてスキルアップのためにシーライクスも始めてみました!!

今回は、「シーライクスの講義内容ってどんなカンジなの??」って思っている人に向けて実際に講義を受講してみた体験談を紹介します。

今回紹介するコースは「WEBデザイン入門コース」です。

「WEBデザインって何をするんだろう…。全然わからないな…。」

って思っていても安心してください☆

この記事を読み終える頃には、「WEBデザインのことが何もわからくてもデザインに関する制作ができるようになるんだ!!」と思えるようになっていますよ。

【シーライクス体験談】携帯ショップ店員がPhotoShopでバナー制作に挑戦!!

講義を始める前までは

これまでPhotoshopを触ったことがないけど大丈夫かな…

なんて思っていましたけど大丈夫でした!!

わたしも今までPhotoshopなんて使ったことなかったですし、なんならPowerPointだって使いこなせないレベルです(笑)

たしかに最初は講義内容についていくのが大変だったり、ショートカットキーを覚えるのが大変でした…^^;

でも!!ちゃんと動画を見ながらわからないところを繰り返し見直すことで、バナーを作成し終わるころには

なんとなく使えそうかも…!!

って思えるようになっていました(笑)

広告

PhotoShopの使い方

Photoshopダウンロードしなきゃいけないの~

って思ってましたがぜんぜん大丈夫でした☆

まずはPhotoshopをダウンロードするところからちゃんと丁寧に教えてくれます!!

しかもちゃんとリンクも誘導してくれます。

Photoshopは有料ツールで月額使用料がかかリますが、現在でも多くのWEBデザイナーが使用しているプロ仕様のツールなんだそうです!!

このPhotoshopを使いこなせればWEBデザイナーとしてデザイン会社でも通用するようになりますし、他のツールへの応用も効くとの事でした。

WEBデザイン入門コースで勉強しているうちは一番安い「Photoプラン月額1078円」で十分とのことなので、わたしもそうしました。

ちなみにPhotoshopの画面はこんなカンジになっています。

講義中は「ツールバーから移動ツールを選択して~」とか「パネルからレイヤーを選んで~」みたいにPhotoshopのどこを選ぶのか指示が飛んでくるので

画面構成の名前を覚えておかないと、講義についていくのが大変でした^^;

でも、動画講義なので自分で再生速度を調整したり、一旦停止したり、わからないところは何度も繰り返し確認できるのがオンラインスクールのいいところですね☆

それから、講義中は作業効率化のためのショートカットキーの解説もあります。

ショートカットキーは覚えておくとマウスを使うよりも早く操作の切り替えができるので慣れれば全然作業スピードが上がります!!

SHEの講義でも、「最初から覚えておくことをオススメする」っていってましたので、メモって最初の段階から使っていくのがいいかもです。

よく使うショートカットキー
  • Alt+A:全選択
  • Ctrl+Enter:操作の確定
  • V:移動ツールへ切り替え
  • Shift+選択:複数選択
  • Ctrl+G:レイヤーのグループ化
  • Shift+拡大縮小:オブジェクトの形を保ったまま拡大縮小
  • Alt+拡大縮小:作業画面の拡大縮小
  • Ctrl+1:100%画面表示
  • Ctrl+0:複数の作業画面の一覧
  • Tab:全画面表示
  • Ctrl+S:保存

ちなみに…

2021年8月以降にPhotoshopをダウンロードする人は、Photoshopの「パネル」のなかの「属性」という項目は「プロパティ」に変わっているので覚えておいたほうがいいと思います。

Photoshopは頻繁にバージョンアップがあるらしく、そのたびに少しずつ操作方法や名称が変わるらしいのでシーライクスの講義で使われているPhotoshopはバージョンが古いのかもしれません。

はじめての人はここでもちょっとつまずくかも…。

わたしも最初は

めんだこ
めんだこ
「属性」なんてどこにもないじゃーん(泣)

って焦りましたからね(笑)

  • Photoshopのプランは最安のフォトプラン1078円がおすすめ
  • 画面構成を覚えると講義についていきやすい
  • ショートカットキーは最初から覚えるのがオススメ
  • 新しいPhotoshopは「属性パネル」が「プロパティパネル」に変更
広告



文字入力にチャレンジ

では、早速Photoshopを操作してみます…!!

ドキドキ…。

テキストはツールバーのTと書いてあるところを選択すると入力できました☆

右側の「文字パネル」でフォントやサイズ、色の変更ができます。

じゃん☆

文字が入力できました!!

意外とカンタンです。

あとは移動ツールを使って文字を動かしたり、文字と文字の間を広くしたり狭めたりする、デザインに関する少し上級者向けの応用的なテクニックも勉強しました。

移動ツールに切り替えるときに、ショートカットキー(移動ツール:Vキー)を使う場合はちゃんと作業をCtrl+Enterで確定してからショートカットしないとおかしなことになっちゃいます…。

わたしはここで少しつまずきました…(笑)

めんだこ
めんだこ
Vキーを押してるのに全然移動ツールに切り替えできないじゃん!!

ってなります(笑)

  • ショートカットキーを使うときはCtrl+Enterで作業を確定してから!!
  • 文字デザインの応用的なテクニックまで学べる
広告



図形作成にチャレンジ

続いて図形作成にチャレンジです!!

図形はツールバーの中の□のマークから作成できます☆

では早速図形を作成してみましょう!!

はい!!
図形を描画できました☆

長方形や円、多角形以外にも同じツールからPhotoshopに入っている複雑な図形も描画することができます。

続いて、プロパティパネル(シーライクスの講義では属性パネル)から色を変えてみましょう。

はい☆
色が変わりました!!

ここまではそんなに難しくないと思います(*^^*)

わたしでもカンタンにできました☆

広告



マスクがけにチャレンジ

Photoshopの「クリッピングマスク」「レイヤーマスク」といった機能を使えば初心者でもこんなオシャレなロゴを作成できちゃいます☆

↑上の画像は講義の内容を参考に「クリッピングマスク」を使って作ってみました。

難しそうに感じますが、慣れればカンタンです☆

シーライクスの講義ではこうしたちょっと応用的なテクニックもきちんと教えてくれました。

\SHElikesの無料体験レッスンはこちら/

広告



いよいよバナー制作に挑戦!!

ではいよいよPhotoshopを使ってバナーを作ってみます!!

今回はこの見本にそってバナーを作成しました。


引用:未経験者向けWEBスクール【SHElikes】

バナー作成の流れはこんなカンジでした

  • フリーフォントのダウンロード
  • テキストの装飾
  • テキストを円形に表示させる
  • フリーアイコンのダウンロード
  • 図形の編集

Photoshopには最初から外部サイトからフリーのフォントをダウンロードしてどんどん好きなフォントを増やしていくこともできます。

じゃあ早速フリーフォントをダウンロードしてバナー作成にチャレンジしよう!!

と思ったところで事件発生…。

フリーフォントをダウンロードするとZIPファイルが保存されるんですが、なぜかこのZIPファイルが解凍できない…。

っていうか解凍しようとすると、なんかライセンスが切れたとかで有料のアプリをダウンロードされそうになる…。

講義の内容とは全然関係ないところでつまづいてしまい、戦意喪失…。

めんだこ
めんだこ
もうしょうがないからフリーフォント使わないでバナー作るか…!!

とも思いましたがなんかそれだと気持ち悪い…。

いろいろ調べたら、「窓の杜」というところにあるフリーの解凍ソフトを使ったら解凍できました^^;


参考:窓の杜|Lhaplus

この「Lhaplus」というソフト使ってとりあえずファイルの解凍はできたので、フォントをインストールします。

解凍したファイルを開いて「ADAM.CG PRO」っていうフォントファイルを開くと↓下のような画面になるので、「インストール」をクリックすると完了です。

ここまで30分近くかかりました…^^;

WEBデザインコースに限らずITスキルは自分の使っているパソコンの機能についても知識を深めて行く必要がありますね!!

わからないことは自分で調べて自分で解決していく力が身につきます☆

動画を何回も何回も繰り返し再生しながら作業すること約2時間…。

やっとバナーが完成しました☆

どうでしょうか??

見本と見比べると細かいところでテキストの配置や、「SHE AIRLINE」の部分のカーブのかかり方が違いますが、はじめてにしては上出来じゃないでしょうか??(笑)

時間はかかりましたがはじめてPhotoshopを操作する人でも、最後にはちゃんとバナーを作成できるようになります!!

Photoshopは今での多くのWEBデザイナーが使っているプロ仕様のソフトなのでマスターすることでWEBデザイナーとして独立することも夢じゃありません☆

今日紹介したのは有料レッスンの内容ですが、シーライクスでは無料体験レッスンも行っているので、気軽に参加できます☆

\SHElikesの無料体験レッスンはこちら/

https://mendakonoheya.com/shelikes-ayashi-shukyo

まとめ

  • Photoshopを触ったことのない初心者でも全然大丈夫☆
  • 講義に使うならphotoShopは最安のフォトプラン1078円がオススメ
  • Photoshopの各部位の名前を覚えるとラク
  • ショートカットキーも最初から覚えると作業がスムーズ
  • 新しいPhotoshopは「属性パネル」が「プロパティパネル」に
  • 講義を最後まで受ければちゃんとバナー作成までできるようになる!!

ここまで読んでくれてありがとうございました!!

わたしもまだPhotoshopの操作には全然なれていませんし、解説がなければイチから一人でバナーを作るのは無理です…(笑)

でも、Photoshopはどんどん使って早くなれることが上達への近道かなって思いました☆

シーライクスの講義ってどんなカンジなんだろう??

って思う人への参考になれば幸いです。

それではまた!!

RELATED POST