• 締切済み

photoshopでのwebパーツ制作がうまくできません。

現在、webデザインについて勉強中です。 HTML&CSSでのコーディングは独学ですが何とか分かるようになりました。 でも、肝心なデザインの方がイマイチできません。というか、photoshopの使い方が分からず、イメージしたものを形にでないのです。。。 photoshopでwebデザインするときに参考になるようなサイト、又は参考書などを紹介していただけないでしょうか。 photoshopでやりたいことは以下のとおりです。 ・ナビ(ボタン)を作りたい。 ・素材集等を編集してイメージ画像が作りたい。 ・ヘッダ、フッタを作りこみたい。 ・webデザインのレイアウトがやりたい。 不躾な質問で申し訳ありませんが、なにとぞよろしくお願いします。

みんなの回答

noname#23699
noname#23699
回答No.1

イメージしたものを形にできないと書かれてますが、実際どういうものを作りたいのでしょう? たとえば、「宝石みたいなボタンを作りたい」など具体的な形は決まっているのなら、フォトショップの技術的な問題なのですが・・・。 「・素材集等を編集してイメージ画像が作りたい。・webデザインのレイアウトがやりたい。」 など質問は少し曖昧すぎてどう答えていいものか・・・。 あと、フォトショップではwebデザインのレイアウトってできないと思います。 絶対無理というわけではありませんが、HTML、CSSを独学されているのなら、 そちらのほうが断然融通が利きます。 フォトショップは、基本は画像処理ソフトなので、レイアウトの技術的な勉強はHTML、CSSでどうぞ。 webデザインをしたいのでしたら、まずは具体的にどんなホームページが作りたいかを考えて、 ノートでもいいので、描いてみたらどうでしょう? ボタンのデザインや、どんなイメージの画像を置きたいかなど、 topページからサブページに至るまで、すべての画面のイメージ図を描いてみるんです。 それからがフォトショップの作業になると思います。 一応、参考になると思われる雑誌を書いておきますので、参考まで。 web関係の雑誌と、フォトショップ、イラストレータなど画像処理関係の雑誌です。 本屋さんでは、パソコン雑誌のあたりにおいてありますので、探してみてください。 ・MdN ・web creators ・Web Designing ・CG WORLD ・DTP WORLD

参考URL:
http://www.mdn.co.jp/,http://book.mycom.co.jp/wd/index.html,http://www.wgn.co.jp/store/,
popoto
質問者

お礼

回答、ありがとうございました。 ホント質問べたですみません。 紹介していただいたサイト参考にさせてもらいます。

関連するQ&A

  • Webサイト制作におけるPhotoshopの使い方

    未経験からwebデザイナーの転職を目指しているものです。 架空のお皿屋ブランドサイトを作成しており、HTML.CSS.JavaScriptで簡単なコーディング、画像配置を終えてあとはデザインを施すだけなのですが、Photoshopでどのような色、デザインをしていけば良いのかわかりません。 これといった正解もなく、画像を少し明るくしたり、画像の中に文字をつけたり、切り取ったりすることくらいしかわからず、どのようにPhotoshopで加工すれば良いできに仕上がるのか全くわからない状態です。 こういった場合どのようにしていけば良いのでしょうか? 他者の作ったブランドサイトを見て、共通しているデザイン部分を取り入れていけば良いのでしょうか?

  • Webプログラマが学ぶPhotoshopによい方法はありますか?

    現在Web(PHP)プログラマをしていて、ぜひPhotoshopなどでロゴやボタンなどを作れるようになりたいと思いました。現在はPhotoshop CS 3を持っています。また、CSSについての知識があります。 当面の目標は、Photoshopの基本的な使い方に慣れる。バナー、ロゴ、丸角、CSS Spriteなどを自分で作ることに慣れる。ということです。 Photoshopの書籍をいくつかみたのですが、写真のリタッチやWebデザインには直接関係しないことも多いので、何かいい方法はないかと考えています。 すでにテーブルレイアウトを使わないCSSでのレイアウトはわかり、HTMLも分かるので、Dreamweaverを使わないでできる方法を探しています。また、オンラインで自動的にロゴやフィクスチャを作成してくれるサービスがありますが、それに甘えていては、いけないと思うので、自分でPhotoshopを使えるようになって、Web上にあるいろいろなチュートリアルをどんどんこなせるようになりたいと思います。 もし、書籍やウェブサイトなどでお薦めがあれば教えてください。また、プログラマーの方でWebデザインを勉強中のかたや、すでにある程度できるようになったという方の経験談があれば教えていただければ幸いです。

  • web制作について教えて下さい。

    デザイン事務所を自営しています。 お客様から頼まれて、Webサイトを作りました。Dreamweaverと Fireworksで作成して、必要な部分はcssやソースを書き直して修正しました。 アップしてしばらくして、お客様のところにweb制作専門の業者が訪問 してきて、サイトを見て次のように直した方が良いといわれたそうです。 「画像ばかりでヒットしにくいので、コーディングをして テキスト中心にした方が良い。h1要素を入れないといけない。 我が社ならHTML5とcssでコーディングします。」 自分たちの会社で再制作させろという案内のようですが、いろいろ専門的な 言葉を並べられて、お客様は何のことかわからないのでこのままでは見れなく なるのではと思い、相談してきました。 私はどちらかというとグラフィックデザインが得意なためサイトを作る時も 画像が中心となってしまいますが、それでもcssやソースで見やすくなるように しているつもりです。Dreamweaverで制作したのとコーディングするというのは どういう違いがあるのですか。(そもそもWebデザインとコーディングとはどう 違うのでしょうか。) とりあえずはwebサイトの閲覧と中のページのフォーム送信は正常に動いて いますので問題ないのですが、お客様に不安を感じさせなくしたいと思います。 サイト制作について初歩的なことですが、よろしくお願いします。

    • ベストアンサー
    • HTML
  • Web制作初心者です。

    Web制作初心者です。 今回ある個人飲食店からサイト作りを頼まれて作ってたのですが、ヘッダーのイメージを 変えて欲しいということで変更しようと思うのですが、最初作成した順番的には、 1.イラレで枠組みレイアウト 2.photoshopでその枠組みに沿って、レイヤースタイルとか写真とか加工して当てはめる。 3.それを元にコーディング という形にしたのですが、変更という行為自体初めてでどこから手をつけたらいいのかわかりません。 コーディングの段階でサイトが出来た段階での微調整で幅とか数pxとかいじっているので、 自分的には、Webを画像で落としてそれを元にガイド引いて、変更画像を作って入れ込むという感じなのかな? と勝手に思ってるのですが・・。 普通はどういう順番が正しいのでしょうか?

    • ベストアンサー
    • CSS
  • Web制作 構成案をPhotoshopに書き写す

    Web制作 構成案をPhotoshopに書き写すということについて 現在Webサイトの制作をしており、下記の記事のアドバイスに従って制作を進めているのですが、 https://koredake-design.com/design-comp-kotsu/#i-3 デザインカンプの制作手順の項目の 構成案の要素を全部置く まずはデザインカンプ制作前に準備した構成案をそのまま書き写しましょう。 構成案をPhotoshopで作っている人は問題ないですが、他のツールや紙ベースで作成している方は、とにかくデザインすることは考えず構成案をそのままPhotoshopに写してください。 この構成案をPhotoshopにそのまま書き写すというのは、 画像の構成案をそのままPhotoshopに書き写す、PhotoshopでHTML、CSSでロゴや文字を配置する時のように、Photoshopで構成案をそのままPhotoshopで画像の状態を実現するということなのでしょうか? また、なぜフォトショップに書き写す必要があるのかよく分かりません。紙に構成案を書き写したのですが、それではダメなのでしょうか? どのように書き写していけばいいのか全くイメージが湧かないのですが、アドバイスを頂けると幸いです。

  • Web制作 レイアウトの決め方について

    Web制作 レイアウトの決め方について HTML、CSSでWebサイト制作をしているWeb業界未経験のものです。 実際サイトを作る時に、何をどこに配置するといったレイアウトを決めると思うのですが、皆さんは綺麗に見せるためのレイアウト方法や、何か型や、テンプレートのようなものを参考にしながら作っているのでしょうか? 私は未経験からWebデザイナーへの転職用の作品を作っている最中なのですが、レイアウトはなんとなく自分の勘で決めて作っていたので、それだとあまり作品の完成度としてはイマイチになってしまう気がするのですが、何かアドバイス頂けると幸いです。 ちなみにお皿のブランドサイトを作っています。

  • これだけはおさえておきたいWEBデザインの参考書教えてください。

    これだけはおさえておきたいWEBデザインの参考書教えてください。 Illustrator,PhotoShop,DreamWeaver,Fireworks,Flash,HTML,CSS,Javascript 等 でこれだけはおさえておきたい参考書教えてください。 上記以外にデザイナーの考え方とか色とかの参考書もあれば教えてください。

  • Webサイトのリニューアルの見積りについて

    Webサイトのリニューアルの見積りを作成する事になりました。 考えても考えてもよくわからず、ネットで調べていますが余計ごちゃごちゃになってしまい、わからなくなってしまいました。 そこで皆さんにご教授いただけたらと思い、投稿しました。 例えば  ・デザイン費用とは何を指しているのでしょうか。    PhotoShopでWebサイトのページのデザインを作成しているのでしょうか。    デザインとはどのようにしているのでしょうか。  ・コーディング費用とは何を指しているのでしょうか。    デザイン画を元にHTMLタグやCSSでWebページを作成しているのでしょうか。    JavaScriptはコーディングの作業に含まれるのでしょうか。  ・素材費用とは何を指しているのでしょうか。    小さい素材、中ぐらいの大きさの素材、大きい素材、どのように金額を算出しているのでしょうか。    FlashやアニメーションGIFでの作成は別費用でしょうか。  ・プログラミング費用とは何を指しているのでしょうか。    開発環境(サーバー、PHP,データベース等)の準備はどの費用になるのでしょうか。    トピックスやお知らせを入力、更新、削除、表示する為の費用はどのように算出すればいいのでしょうか。    また関数クラスや定数の作成等はどのように算出すればいいのでしょうか。 など・・・ 自分なりにネットで調べて見積りの項目をあげてみました。 足りないものや必要ないものがあったらアドバイスをいただけませんでしょうか。 宜しくお願いします。

  • photoshop・Webデザインするときのレイヤ

    こんにちは。 現在、初心者からWebのレイアウトをphotoshopを使って行うかと思っており、 後々、スライスやコーディングをする際、レイヤー分けを しておいた方が便利かと思うのですが、どのようなレイヤー分けが 必要でしょうか。 参考になるサイトがあれば、教えて頂けると有り難いです。 また、Illustratorのように、オブジェクトをレイヤー間をカンタンに移動することは、 できないのでしょうか。 知識をお持ちの方、是非ともよろしくお願いいたします。

  • デザイナーの方にWEBデザインを依頼する場合

    フリーでWEB製作や、PC設定などをやっています。 WEB製作に関してはHTML+CSSのコーディングが専門で、CGIやプログラミング言語も主なものはわかるのですが、デザインは苦手です。今回頼まれそうになっているのがデザインにも力を入れたいサイトなので、デザイナーさんを頼まなければなりません。 デザイナーさんでも紙媒体のデザインが主体の方とWEB中心の方がいるようですが、HTMLコーディングをこちらでやる場合、デザイナーさんはWEBの知識(又は経験)がなくても大丈夫なものでしょうか。 又、当方はWindows環境でIllustratorやPhotoShopなどがあるのですが、デザイナーさんがMacでデザインしたものをaiやpsdなどでもらって、そこから部品などを切り出して加工するのは、Windowsでやっても大丈夫でしょうか。

    • ベストアンサー
    • CSS

専門家に質問してみよう