
PRO COURSE
初心者のためのPhotoshop超基礎講座 Webデザイン編
Photoshop初心者だけど、どうやって勉強すればいいのか分からない...。
そんな方向けに初期設定からツール、便利な効果などの基本の使い方を分かりやすく解説します。
独学で勉強したい、初心者のための
本当にやさしいPhotoshop講座
Photoshop独学で学べますか?
- Photoshopを独学で学んでいるけど基本ができていない…
- ある程度は触れるようになったけど、まだよく分からないことが多い…
- 仕事でPhotoshopを覚えなければいけなくなった…
- これからPhotoshop使えるようになりたい…
- Webデザインを始めてみたい...
でもこれからどうやって勉強すればいいんだろう?
分からないことがあっても初歩過ぎてネットでも調べられない、
本は難しいし、学校は費用がかかるし...。
この講座は、そんなPhotoshop初心者の方々のためにぜひ利用していただきたいPhotoshopの基礎編です。
Photoshopを基礎から学べる!
いきなり実際のデザイン作業に入るのではなく、
制作を始める前のカンバスの設定から、デザイン準備、イメージづくり等の初期段階など、初めての方にも分かりやすいように解説しています。
もちろん、後半からは実際に効果を駆使した素材の作り方も収録しているので、Webデザインだけではなくグラフィックデザインを学びたい方へもオススメです。
超基礎編の本コースでは、動画は全て短い時間内に収めているので、最後まで飽きたり疲れたりすることなく学ぶことができます。
マウスの動きを目で追うだけではなく、同時にご自身の画面を操作して一緒に進められるように作った講座なので、ストレスなく続けることができると思います。
また、手順に沿ってセクションを分けていますので、あとで一部の項目だけ復習したいときにも便利です。
この講座で学べること
- 初期設定
- デザインに入る前に必要な手順
- 色の変更
- パターン(模様)の設定
- 画像や写真データの配置
- 紙のような表現の素材をつくる
- 写真のような表現の素材をつくる
- 額縁の素材をつくる
- 木目模様をつくる
- 素材に陰影や立体感をつける
- Webボタンのつくり方
- Web上で使用される文字
- 文字の入力・整え方
- 写真上の文字を見やすくする
- Webデザインとして利用するための設定
Photoshopでの素材の作り方は、使う人の数だけ方法があると言われています。
これらの内容を習得したあとは、ご自身でほかの効果や設定を試して応用してみることで、いろいろなデザインを作ることができます。
初めての方でも安心して学べるこの講座で、ぜひPhotoshopの最初の一歩を踏み出してみてくださいね!
Course content
Total
44 minutes
Preview
You can preview lectures with this label
Section 1:画面の設定とデザインの準備 | ||||
1 | はじめに | Preview | 0:26 | |
2 | カンバスの設定 | 0:54 | ||
3 | 定規・ガイド | 1:19 | ||
Section 2:色・形・パターンでだいたいのイメージをつくる | ||||
4 | シェイプで配置イメージをつくる | 0:47 | ||
5 | 背景の効果(パターンオーバーレイ) | 0:55 | ||
6 | 背景の色(カラーオーバーレイ) | 0:53 | ||
Section 3:データを配置する | ||||
7 | 大きな写真の配置(クリッピングマスク) | 1:17 | ||
8 | ロゴとほかの写真の配置 | 0:32 | ||
9 | レイヤーの整理 | 0:19 | ||
Section 4:コンテンツをつくり込む | ||||
10 | 紙の端のちぎれたような表現をつくる | 1:44 | ||
11 | ポラロイド写真風の表現をつくる | 0:46 | ||
12 | 額縁と木目をつくる(境界線とフィルター) | 1:22 | ||
13 | 額縁の角を丸くする | 0:39 | ||
14 | ベベルとエンボスで額縁に陰影をつくる(1) | 1:15 | ||
15 | ベベルとエンボスで額縁に陰影をつくる(2) | 0:48 | ||
Section 5:ボタンをつくり込む | ||||
16 | メインメニューにグラデーションをかける | 2:26 | ||
17 | ほかのボタンにグラデーションをかける | 1:23 | ||
18 | メインメニューの区切りラインをつくる | 1:02 | ||
19 | 区切りラインにハイライトをつける | 0:39 | ||
Section 6:テキストの入力・設定 | ||||
20 | Webデザインでのテキストの種類 | 1:16 | ||
Section 7:画像テキスト | ||||
21 | メインメニューにテキストを入力する | 0:37 | ||
22 | メインメニューのテキストを中心へ配置する | 0:53 | ||
23 | 字間の調整(カーニング) | 0:54 | ||
24 | 記号の調整(ベースラインシフトを設定) | 0:55 | ||
Section 8:通常テキスト | ||||
25 | 行すべての字間を調整(トラッキング) | 2:03 | ||
Section 9:フッターをつくる | ||||
26 | フッターの区切りラインをつくる | 2:44 | ||
27 | フッターにテキストを配置する | 0:56 | ||
Section 10:コンテンツに効果をつける | ||||
28 | ボタンにドロップシャドウをつける(1) | 2:01 | ||
29 | ボタンにドロップシャドウをつける(2) | 0:39 | ||
30 | ドロップシャドウで紙の影をつくる | 1:02 | ||
31 | ドロップシャドウで写真の影をつくる | 0:39 | ||
32 | ドロップシャドウで額縁の影を作る | 0:35 | ||
33 | 額縁の内側に立体感を出す(シャドウの位置) | 1:13 | ||
34 | 文字の周りにふちどりをつくる | 1:09 | ||
35 | 文字の周りのふちどりをぼかす | 1:18 | ||
Section 11:Webデザインとして必要な設定 | ||||
36 | CSSをコピーして書き出す | 0:41 | ||
37 | 画像のスライス設定 | 1:13 | ||
38 | スライスの最適化オプション設定 | 1:34 | ||
39 | 画像をWeb用に書き出し | 1:51 | ||
40 | おわりに | 0:08 |