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

新米webデザイナーおつぶのメモブログ

未経験からwebデザイナーを目指す人へ

【photoshop】画像を書き出す方法とそのポイント①

-----

 

制作会社に入ってすぐ大量に画像の書き出しを頼まれました。

もちろんphotoshopの使い方も分からない初心者の私はただ困るだけ。。。

書き出し方も知らないなんて、、なんと恥ずかしい。。

しかし、色んな書き出し方を覚えておくとすぐに先輩方に喜ばれると思います。

というか、デザイナーからしたらこれはもう"作業"なのでいかに効率よくできるかってだけですけど。

 

今回はphotoshopでの書き出し方・ショートカットキー・その他のポイントを3記事にわたってご紹介します。

他に書き出し方を知っていたら新米の私にも是非教えて欲しいです。

 

【1. photoshopでの書き出し方】

 

やり方は1つだけではないので、幾つか紹介します。

①web用に保存する

②スライスツール

③画像アセット

 

 

※まず、書き出したい画像を選択して別ファイルに貼り付ける

1)長方形選択ツール(M)で画像を選択し、コピー(command + shift + C)します。

2)新規ドキュメントを開きます。(command + N)

3)新規ドキュメントに貼り付けます。(command + V)

 

これで準備完了、そしたら下記の好きなパターンで書き出してください。

(多分この辺も人によって様々ですが、初心者が一番分かりやすそうなので載せておきました)

 

 

①web用に保存する

ファイル➡︎書き出し➡︎Web用に保存(従来)

command + alt(option) + shift + S です。

このショートカットキーはすぐ覚えちゃいます。

なぜ ”(従来)”とつくのかは是非後でググってください。

私は保存する前に細かい画像の設定をしたい時に使ってます。

f:id:tsublog:20170322001432p:plainf:id:tsublog:20170322001439p:plain

 

 

②スライスツール

ルールバーにある、スライスツールを使用します。

ショートカットキーがCで押すだけ。

個人的にはあまり好きではないので使用頻度は低めです。。。

f:id:tsublog:20170322001938p:plain

 

 

③画像アセット

私はこの書き出し方が一番好きです!!簡単で、かつ便利!!

大量に画像を保存したいとき本当にオススメです。

上記2つの書き出しをするときにはじめは「アクション」機能を使うこともあったのですが。。これを知ってからはもう使ってません。

 

1)まず、保存したいレイヤーの名前の語尾にファイル形式の名前をつけます。

ここが割とポイントですが、、

JPEGの最高画質100%で書き出したいときは「.jpg10」とつけます。

他にもパターンがあるので、その辺は必要なときにググってみてください。

基本はpngで書き出したいなら「.png」、jpgで書き出したいなら「.jpg」です。

初心者ははじめはこの辺しか使いません、本当に。

 

f:id:tsublog:20170322002933p:plain

 

2)ファイル➡︎生成➡︎画像アセットを選択します。これで終了!!!

f:id:tsublog:20170322002945p:plain

 

3)同じ階層に「-assets」みたいなフォルダ名で勝手にまとめられて保存されているので探してみてください。

 

f:id:tsublog:20170322002926p:plain

 

 

他にも「クイック書き出し」とか「書き出し形式」とかありますけど、

その辺は仕事ではあまり使用してないです。。

 

大量にある時はアセットが一番楽だしオススメです。

私は特に大量にバナー広告のデザインを任された時とかに使ってます。

 

-----

--

 

次の記事は続けてこの辺載せていこうと思います。👇

【2. jpegpng、ai、svgなど画像のファイル形式のちがいと使用方法】

【3. 画像の書き出しサイズの決め方】

 

【ヨダン①】 新米デザイナーが任される仕事内容

-----

おつぶです。

まだまだ新米なので、最近のデザインの仕事は専らアイコン作成です。

「誰もが通る道だから、まずはアイコン職人になりなさい」と先輩に言われました。

 

・アイコン作成

・バナー広告のデザイン

・その他ちょっとしたデザイン

・たまにコーディングのちょっとした修正など

・その他雑務

が現在回される主な仕事内容です。

 

どの制作会社でも基本的に初心者はこれらの仕事を担当するのではないかと思います。

やる仕事があり、気合が有り余ってる方は、先輩がやっているデザイン案と違う案を勝手に作って提案するのも良いかと思います。(厳しいデザイン会社なら通る確率はほぼ0%に近いですが)

もしくは、早く帰って勉強に時間を費やすか、ブログを書くか、作品をどんどん増やしていくか、、、そういう時間も大切なことだと個人的には思ってます。

私の場合、会社が完全にデザインとコーディングが分業化されてるので、コーディングの仕事は全体の10%くらいしかきません。納期もあるので、社内のプロコーダーさんが素早く形にしてくれます。

個人的にはコーディングもしっかり勉強したいので、もうこちらはほぼ独学です。

誰かマンツーで教えて欲しいです、、、。

でも優先的にはデザインを日々極めていきたいと思っています。

 

なので、明日からはやっぱりPhotoshopillustratorの使い方についてどんどんUPしていこうと思います。後でまとめ記事も作ります!(完全に自分用)

 

End---

--

【web制作】新米デザイナーのわたしが最近覚えた業界用語

-----

webの勉強を始めてから4か月目、制作会社で働き始めてから2か月目、

の新人アシスタントデザイナーの私です。毎日必死です。

 

最近覚えた業界用語的なものを面白いのでメモ用に残しておきます。

半年後くらいには自然と会話で使えてるのかなあとか思いつつ。。

 

・ローンチ

・完パケ

・人日

・トンマナ

・コンパネ

 

ベテランの皆さんは、「そんなのも知らないのかこいつは!」

って思うレベルですよね?

一つもわからなかったあなたは、正真正銘本物の初心者です。

 

下記、まとめです。

 

・ローンチ

www.weblio.jp

簡潔に言うと、webサイトならサイトの公開日。

使用例としては、「この案件は◯月◯日にローンチだから」みたいな感じです。

 

・完パケ

ローンチと同様、「スケジュールは◯月◯日に完パケ予定です」的な使い方をします。

上記2つはIT用語というよりは、広告用語です。

スケジュールについて説明するときにディレクターの方々がよく使ってます。

 

・人日

e-words.jp

web制作の作業量を表す単位です。

webサイトを1つ作るのに、何人で何日かけて作ったのか。

結果、いくらの請求になるのか。web制作は、人日計算です。

 

・トンマナ

ferret-plus.com

これも広告よりかも。トーン&マナーの略です。

でも実際の会話の中で使ったことも聞いたことも今のところないです。

例えば、バナー広告のデザインをする時とかに使うんでしょうか。

私もきちんとトンマナを意識して作っていこうと思います。

 

・コンパネ

これは簡単。コントロールパネルですね。

なんとなく、コンパネって言ったりするんだあ。。ふうん。。

って思ってメモっておいたものです。

それだけです。

 

では、また業界用語メモも増えたら後ほど更新します!

 

-----

--

【photoshopの使い方】初心者が覚えるべきphotoshopのショートカットキー

 

-----

 

◼︎ショートカットキーをさっさと覚えなさい 

今回はphotoshopのショートカットキーについて。

初心者が覚えておいたほうがいいと思うものを紹介します。

 

まず、ツールの選択。

 

【選択系】

・移動ツール ⇒ 「 V 」

・長方形選択ツール ⇒ 「 M 」

 特にこの2つの使い方を覚えると、移動が簡単にできちゃいます。

 全く初心者の私は、これをどういう時に使うのかもわかりませんでした。

 (後ほど解説します。)

 

・長方形ツール(長方形を作る) ⇒ 「 U 」

 

 

 

【テキスト入力系】 

・横書き文字ツール ⇒「 T 」で入力スタート。

・改行⇒「 Enter 」

・入力終了 ⇒「command + Enter 」

 

テキストの大きさを変える操作についてですが、

時間がない時やちょっと調整したい時はテキストボックスを使っちゃいます。

・テキストボックスを表示

⇒テキストを選択しながら「 command 」

上下左右好きなところを引っ張ってみるとそのまま変形できます。

 

 

f:id:tsublog:20170311103657p:plain

 

 

クリッピングマスクの作成

⇒ 「 option + command + G 」

(使い方は前回説明しました。下記を参考にしてください。)

tsublog.hateblo.jp

 

 

【ガイドの表示・非表示・ロック】

・ガイドの表示/非表示 ⇒「command + : 」

・ガイドのロック/ロック解除

⇒ 「option + command + : 」

 

  

【選択範囲の塗りつぶし】

・描画色 ⇒ 「 option + delete 」

・背景色 ⇒ 「 command + delete 」

 

 

もっと便利で簡単になるショートカットキーも数え切れないくらいありますが、

自分のメモを見返すと1日目に覚えたのはこのくらいでした。

 

初めはゆっくりでいいと思うので、photoshopに徐々に慣れていければいいと思います。

先輩方からは慣れてきたら作業スピードを上げることも大切だけど、初めは確実に1つ1つできるようになることが大切だとアドバイスされました。

焦らずゆっくりマイペースにやっていきましょう!

 

-----

-- 

【photoshopの使い方】クリッピングマスクの作成方法

-----

 

現在、webデザインを勉強し始めて4ヶ月目のおつぶです。

制作会社で働き始めて3か月目突入です。

スキル習得にとにかく必死です。

 

前回のカンプ作成のポイントについてのメモです。

photoshopの基本的な使い方でもあります。

 

◼︎マスクのかけ方を覚えなさい

これは非常に大切です。

これでつまずいていたら、大変。

 

そもそもマスクって何?

みたいな話になると思いますが、、、

 

「マスク」=「クリッピングマスク」のことです。

 

 

下記、マスクをかける具体的な操作手順です。

試しに1回作ってみてください。

フリー素材でもいいので、適当に画像を1枚用意してください。

 

 

①長方形ツールを選択し、長方形を作る。

長方形を作る方法は2種類。

 1)置きたい場所に1回クリックして数値を入力して長方形を作る

 2)置きたい場所でドラッグしてそのまま右に引っ張って適当にサイズを決め作る

私はできるだけ1pxでもずれて欲しくないので先に数値を決めて作ります。

 

f:id:tsublog:20170311100644p:plain

 

 

 

②その上に長方形より大きな画像を置いてみてください。

自分のフォルダからphotoshopのアイコンの上にドロップすればファイルを開けます。

画像が小さい方はそのまま大きく変形させてみてください。

 

f:id:tsublog:20170311100758p:plain

 

 

③次に、レイヤーというウィンドウを確認してください。

長方形というレイヤーの上に画像がくるようにしてください。

画像のレイヤーを選択し、「option + command + G」を押してクリッピングマスクを作成します。

このショートカットキーは必ず覚えることになります!

 

f:id:tsublog:20170311100810p:plain

 

そうすると上の画像のように「image」というレイヤーに下矢印が出てきます。

これでマスクがかかりました。

 

 

何回かやれば、マスクってこうやるのか。と身体で覚えらえると思います。

できない方は何度も挑戦してみてください!

 

次回は

◼︎ショートカットキーをさっさと覚えなさい

photoshopで初心者が覚えるべきショートカットキーについてメモっておきます。

 

 

-----

--

【photoshopの使い方〜参考〜】web制作会社で初めてのカンプ作成

-----

 

現在、webデザインを勉強し始めて4ヶ月目のおつぶです。

 

未経験で入ったweb制作会社ではじめて任された仕事、それはECサイトの運用でした。

言うなれば、それはほとんど作業です。言われた通りにCMSのやり方を覚え、更新する日々。

たまに素材が送られてきて、カンプを1ページ作ってと言われるぐらい。

 

ということで、まずwebデザイン初心者はカンプを作れるようになるべきだと思います。

私は全くの未経験から始めたので、(一応スクールには1ヶ月通いました)photoshopillustratorも全く使えませんでした。HTMLとCSSjQueryの知識がちょっとあるくらい。

具体的に言うと、長方形の作り方すらよく分からない。

もちろんマスクの仕方も直線の引き方も分からない。

そんな状態で、よくもwebデザインをやりたいなどと言っていたなと感心します。

 

ということで、初心者はまずカンプを作ってみるといいと思います。

カンプ(モックアップとも呼ばれています)の作成とは、photoshopで画像やカラーを使いながら実際のサイトの見た目だけを作っていく作業です。

できれば先輩方が作った現場のカンプを引っ張り出してもらい、同じようにイチからphotoshopを使いながら作ってみることをおすすめします。

もしくは、お気に入りのサイトを見ながら素材を勝手に保存して見た目だけを作ってみるとか。

 

そうすると、先輩方から初めての洗礼を受けることになると思います。

下記に私が注意されたことをメモしておきます。

ぜひこれをカンプ作成の参考にしてみてください。

 

◼︎マスクのかけ方を覚えなさい

◼︎ショートカットキーをさっさと覚えなさい

◼︎マージンが1pxズレたらおわりです

◼︎レイヤーを常に整理しなさい

◼︎ベクトルスマートオブジェクトについて調べなさい

◼︎カラーオーバーレイを使いなさい

 

他にも沢山ありますが、これらは当たり前の当たり前の当たり前です。

次回からそれぞれ細かく解説してみようと思います。

 

-----

--