Photoshop > 新規ドキュメント > Webの中にレスポンシブとかのテンプレが無料ダウンロードできるので見ればすぐに作り方は分かると思う。デザインは、https://io3000.com/https://muuuuu.org/https://sankoudesign.com/とか見て作りたいサイトに似たものを探してイメージを膨らます。ちなみにフォトショ（画像強い）でもイラレ（ベクター強い）でもXD（設計強い）でも特徴はあるけど、どれでも基本的な作り方は同じ。PhotoshopでWebデザインするときにどこで詰まるのかな？初期設定？
今はレイアウトだけならXDで可能ですし、使い方もXDの方が感覚的だと思いますが、いざ必要なパーツを作成する際にはその細かいディテールや質感をXDでは整えきれないことが多いです。私はAIやPSで各パーツ作成、XDでレイアウトというやり方が楽ですが、PSやAIでレイアウトも含めて作成できるので、XDを使わずPSやAIで画面全体のレイアウトまで作成してしまう方も少なくありません。書き出しの仕様なんかはどのソフトもあまり変わりませんので、画面をどのソフトで作ろうが問題はありません。質問者さんがワイヤーフレームのみ作成するタイプの業務を想定しているならXDだけでも良いかもしれませんが、WEBデザインを勉強するにあたっては必ず大なり小なり画像の細かな調整や、フォントの微妙な調整などレイアウト調整以上の作業が必要になります。しかもXDはPSやAIより後に出たので、操作は先に出たソフトを覚えていれば感覚的にわかります。ですので先にPSやAIでそうした細かい画像の調整ができるようになっている方がいいと思います。
Re:3 私は参考書よりも、素敵だなと思ったサイトやバナーをスクリーンショットで保存して、PSでトレースしていきながら、わからない操作を調べていくようなやり方でした。
> WebデザイナーはPhotoshopでデザインするのが基本photoshop使う人が一定数いるのはわかるけれど、基本と言いきれるほどの状況ではないよ一度、figmaなどのデザイン・プロトタイプツールを使ってみてから判断してみてどうかと個人的には、Adobeなどの高額なツールよりも、Figmanなどの無料ツールの方が、効率的に作業が進められるという面白い状況になってると思うよ
4 件の回答
Photoshop > 新規ドキュメント > Web
の中にレスポンシブとかのテンプレが無料ダウンロードできるので見ればすぐに作り方は分かると思う。
デザインは、
https://io3000.com/
https://muuuuu.org/
https://sankoudesign.com/
とか見て作りたいサイトに似たものを探してイメージを膨らます。
ちなみにフォトショ（画像強い）でもイラレ（ベクター強い）でもXD（設計強い）でも特徴はあるけど、
どれでも基本的な作り方は同じ。
PhotoshopでWebデザインするときにどこで詰まるのかな？初期設定？
今はレイアウトだけならXDで可能ですし、使い方もXDの方が感覚的だと思いますが、
いざ必要なパーツを作成する際にはその細かいディテールや質感をXDでは整えきれないことが多いです。
私はAIやPSで各パーツ作成、XDでレイアウトというやり方が楽ですが、
PSやAIでレイアウトも含めて作成できるので、XDを使わずPSやAIで画面全体のレイアウトまで作成してしまう方も少なくありません。
書き出しの仕様なんかはどのソフトもあまり変わりませんので、画面をどのソフトで作ろうが問題はありません。
質問者さんがワイヤーフレームのみ作成するタイプの業務を想定しているならXDだけでも良いかもしれませんが、
WEBデザインを勉強するにあたっては必ず大なり小なり画像の細かな調整や、フォントの微妙な調整などレイアウト調整以上の作業が必要になります。
しかもXDはPSやAIより後に出たので、操作は先に出たソフトを覚えていれば感覚的にわかります。
ですので先にPSやAIでそうした細かい画像の調整ができるようになっている方がいいと思います。
Re:3
私は参考書よりも、素敵だなと思ったサイトやバナーをスクリーンショットで保存して、PSでトレースしていきながら、わからない操作を調べていくようなやり方でした。
> WebデザイナーはPhotoshopでデザインするのが基本
photoshop使う人が一定数いるのはわかるけれど、基本と言いきれるほどの状況ではないよ
一度、figmaなどのデザイン・プロトタイプツールを使ってみてから判断してみてどうかと
個人的には、Adobeなどの高額なツールよりも、Figmanなどの無料ツールの方が、効率的に作業が進められるという面白い状況になってると思うよ