私はこれまでフリーランスでweb制作のコーディングやwebデザインをしてきたのですが必要だったillustratorやphotoshopのデザインスキルは5つのみでした。その他のスキルは、今までのところあまり使っていません。
ちなみに、コーディングをする人もphotoshopというデザインツールのスキルが必要なので、必要スキルを紹介していきます。
どれも10分でマスターできる簡単なものなので、紹介します。
【フリーランスデザイナー/エンジニアしていて無駄だった努力②】
✔️sketch, adobeXD等デザインツール全て使いこなそうとする
👍デザイン&コーディングセットの案件をやればツールの指定がないことが多いので、自分に合ったツール1つ覚えとけばOK。
デザイン単体で受注する場合は不明— ふる🇹🇭 (@guutenx) 2018年8月10日
目次
web制作で必要最低限のwebデザインスキルの前提
Photoshopのソフトをもっていること
特に自分の場合はコーディング案件をこなす場合、photoshopのツールは毎回（具体的に使う場面は後述）使ったので、持っておいた方が良いと思います。
頑張って無料ツールを探しましたが、設定が複雑で結局使えなかったり、怪しいソフトだったので諦めました。
illustratorは最初は不要かも
illustratorは、私の場合は案件によって使う機会があったのですが、
他の知り合いは使う機会がなさすぎてphotoshopしか契約していない人もいました。
illustratorは最初は契約せず、案件で使うようになってから契約しても良いかもしれません。
無料のpsdからの書き出し練習用素材でやろう
photoshopデータ（psdデータ）からコーディングが書き出しできる無料の素材を使って練習をしましょう。
エンジニアがweb制作で必要最低限のwebデザインスキル
Photoshopからコーディングする
画像の背景を透過させる or 色を変更する
案件：コーディング案件・デザイン案件
クライアントから背景付きの商品画像を渡された時に、背景を消して商品だけの画像に加工することがあります。また、背景色を透明にする場合があります。
背景を消す方法は４パターンくらいあるのですが、一番簡単なものを紹介します。
【プログラマー向け最低限のデザイン技術①】
💡photoshopで背景の切り取り
商品画像を渡されて商品だけの画像に加工することがよくあります
1.画像を配置
2.自動選択ツール選択後、画像の背景選択
3.選択範囲を反転
4.上部メニューからレイヤーを出し、レイヤーマスクをクリック pic.twitter.com/5PYeyCATBS— ふる🇹🇭 (@guutenx) 2018年8月23日
ニャンニャン
illustratorでロゴの配色を変える
案件：デザイン案件
サイトデザインに合わせてロゴの配色を変えることがあります。クライアントからロゴのaiデータをもらっていることが前提です。
【プログラマー向け最低限のデザイン技術②】
💡illustratorでロゴの色を変える
サイトデザインに合わせてロゴの配色を変える場合があります
1.ロゴ(aiデータ)を配置し選択ツールでロゴ選択
2.カラーパレットで色変更
3.保存(書き出しを選び、png形式等で保存すれば、そのままコーディングで使える) pic.twitter.com/oGBAFkCOIk— ふる🇹🇭 (@guutenx) 2018年8月23日
ニャンニャン
FigmaもしくはAdobe XDでデザイン
ニャンニャン
案件：デザイン案件
webデザインをするときは、クライアントの指定が特にない場合は、figmaもしくはAdobe XDという無料で簡単に使えるデザインツールを使いましょう。
【ウェブデザインを高速で行う】
💡完成度30%の候補を、色/構成/背景別に出して選んでもらい徐々にfix。
テキストは後で挿入
→最初から完成系を出すと手戻り発生率高い✔️配色候補出し
✔️構成候補出し(htmlテンプレ*をスクショ)
✔️背景候補出し*デザイン+コーディング済のテンプレ#Saam pic.twitter.com/x6M8lCI8oL
— ふる🇹🇭 (@guutenx) 2018年8月10日
Figmaで初心者が簡単にデザインをする方法
初心者がAdobe XDでデザインする
Adobe XDでデザインをする方法は以下を参照ください。
実際にpsdデータを使って練習するときは、ベイジさんが作成した未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開以下のサイトにあるPSDデータを使うのがおすすめです。
データをダウンロードすると、以下のPSDフォルダ内にPSDデータがあります。
例えば、以下の「写真」ファイルから、画像やテキストデータの取得ができます。
