スマート プレゼンター®でセミナー撮影

Webクリエイターのための動学

Webクリエイターのための動学

appstore1

Webクリエイターのための動学は、画像編集の知識や、画像オブジェクトの作成、サイト制作、アニメーションの作成など、Web制作に必要の知識が得られる講座です。アプリを見ながら繰り返し練習することで最新のPhotoshop、Illustrator、Dreamweaver、EdgeAnimateおよびEdgeツールの利用方法が身につきます。

Photoshop  Illustrator  Dreamweaver  Edgeツール&サービス

Photoshop CC

基本知識と基本操作レイヤーと色調補正RAW画像やテキスト活用したい機能
Photoshop CC 基本知識と基本操作

画像の補正や合成、書き出しなど、あらゆる画像編集を行えるPhotoshop。
解像度、出力媒体に合わせた設定、ファイル形式などはビットマップ画像を扱う上で、理解しておきたい基本知識です。

この章のサンプルファイルをダウンロードする

目次
・デジタル画像の基本知識
・Photoshopのワークスペース-1
・Photoshopのワークスペース-2
・Photoshopの基本操作-1
・Photoshopの基本操作-2
・画像ファイルの管理と読み込み
・選択操作と切り抜き
こんなユーザーにおすすめ!
■Photoshopのどこから手をつければいいか悩んでいる方
■PhotoshopとIllustratorの違いがよくわからない方
■Photoshopを基礎からしっかり学びたい方
■書籍だけでは操作方法がわかりにくいと感じる方
■最新のPhotoshopを覚えたい方
■画像の加工や修正をアプリで覚えたい方
■DTPやWebデザイン業界で就職・転職を目指す方
ここで学べる機能
○デジタル画像の基本知識
・Photoshopが扱う画像形式
・カラーモード
・汎用的な画像形式とPhotoshop○Photoshopのワークスペース
・Photoshopのワークスペース
・ドキュメントウィンドウ
・ツールとパネルの基本操作
・ワークスペースの切り替えと保存
・設定の同期

○Photoshopの基本操作
・ドキュメントの新規作成
・ファイル操作の基本
・Web用画像の保存
・ドキュメントの操作

○画像ファイルの管理と読み込み
・写真の読み込み
・Bridgeの基本操作
・Mini Bridgeから画像を開く

○選択操作と切り抜き
・選択操作の基本
・範囲の自動選択
・選択範囲の調整
・画像の切り抜き

Photoshop CC レイヤーと色調補正

Photoshopは背景画像や中心となる画像、装飾画像などをレイヤーとして扱います。レイヤーを効率的に扱って、補正やフィルターが設定された複雑な合成画像を作る知識が得られます。レイヤーには透明度、光彩やグラデーションなどのレイヤー効果をつけたり、重なり合ったレイヤーをどうブレンドするかの描画モード、人物の髪の毛など境界線がはっきりしない対象を自然に切り抜いて合成画像を作れます。
オリジナルの画像の品質を失わずに、より自然な状態に仕上げる調整レイヤーやレベル補正、多様なツールを使って写真から不要な箇所を自然に削除する方法、多用なフィルターを使って手軽に写真からユニークな作品を作り出す方法が学べます。

この章のサンプルファイルをダウンロードする

目次
・レイヤー-1
・レイヤー-2
・色調補正
・写真の修復
・フィルターの適用-1
・フィルターの適用-2
こんなユーザーにおすすめ!
■レイヤーの扱い方を理解したい方
■色を補正する機能がたくさんあって迷ってしまう方
■写真の修復に時間がかかってしまう方
■最新のPhotoshopを覚えたい方
■画像の加工や修正をアプリで覚えたい方
■DTPやWebデザイン業界で就職・転職を目指す方
ここで学べる機能
○レイヤー
・レイヤーの基本操作
・スマートオブジェクト
・レイヤー効果
・描画モード
・画像の合成○色調補正
・調整レイヤーとは?
・色明るさ・コントラスト
・レベル補正
・トーンカーブ
・色相彩度と自然な彩度

○写真の修復
・修復の基本
・コンテンツに応じた塗りと修復

○フィルターの適用
・フィルターの適用
・スマートフィルター
・ぼかしギャラリー

Photoshop CC RAW画像やテキスト

デジタル一眼レフなどの高機能なカメラはデジタルカメラで自動に調整される前のRAW(生)画像を保存しています。このRAW画像を適切な状態に整えられるのがRAW画像の編集機能です。
対象を選択したり、マスクを作る必要なく画像を鮮明化する方法や、傾き、ゆがみを補正できます。
テキストにはポイントテキストと段落テキストがあります。この違いで変わる編集の特性を知って、テキストを柔軟に扱いましょう。
また、複数の画像を使って1枚のパノラマ写真に仕上げたり、階調を失わずに露出を整える、ピントの位置が異なる写真を合成してピントの行き届いた写真にする、などの機能の使い方が学べます。

この章のサンプルファイルをダウンロードする

目次
・RAW画像の編集
・画像の鮮明化
・レンズの補正
・テキストとシェイプ
・画像の自動合成
こんなユーザーにおすすめ!
■デジタル一眼レフカメラの性能をいかした編集をしたい方
■画像のぶれやゆがみを調整したい方
■テキストの追加やアレンジの理解を深めたい方
■自動機能を使ってパノラマ写真やピントの合った写真に仕上げたい方
■最新のPhotoshopを覚えたい方
■画像の加工や修正をアプリで覚えたい方
■DTPやWebデザイン業界で就職・転職を目指す方
ここで学べる機能
○RAW画像の編集
・Adobe Camera Rawの基本操作
・Camera Rawフィルター○画像の鮮明化
・スマートシャープ
・ぶれの軽減
・アップサンプリング

○レンズの補正
・広角補正フィルダーを使った歪みの補正
・レンズプロファイルによる自動補正
・Upright

○テキストとシェイプ
・テキストの追加
・オブジェクトと属性の設定

○画像の自動合成
・パノラマ画像の合成
・HDR画像の合成
・ピントの異なる写真を自動スタック

Photoshop CC 活用したい機能

3D機能は既存のレイヤーを元に3Dオブジェクトを作成したり編集できる機能です。合成画像に部分的に使用するなどして立体感ある作品が作れます。
Photoshopには手軽に使えるビデオファイルの編集機能があります。テキストレイヤーを追加したり、色調補正をおこなったり、静止画にモーションをつけるなどお手軽ながら本格的な動画が作れます。
Webデザインに利用したいのがCSSの書き出し機能やスライス機能です。ドキュメント上に任意の範囲を作成して、目的にあったファイル形式でまとめて書き出しが行えます。
コンタクトシートを使ってレイヤーカンプで書き出すなど機能満載の特別編です。

この章のサンプルファイルをダウンロードする

目次
・3D機能-1
・3D機能-2
・ビデオ編集機能-1
・ビデオ編集機能-2
・Webデザインのための機能
・自動処理とスクリプト
こんなユーザーにおすすめ!
■3D機能を使って立体感のある作品を作りたい方
■手軽にビデオ編集を行いたい方
■CSS機能や画像の効率のよい書き出しを覚えたい方
■最新のPhotoshopを覚えたい方
■画像の加工や修正をアプリで覚えたい方
■DTPやWebデザイン業界で就職・転職を目指す方
ここで学べる機能
○3D機能
・新しい3Dオブジェクトの作成
・文字の3D化と属性の設定
・3Dペイントとオブジェクトのインスタンス○ビデオ編集機能
・ビデオの読み込みと基本的な編集
・メディアの追加
・色調補正とトランジションの設定
・ビデオの書き出し

○Webデザインのための機能
・CSSをコピー
・文字のアンチエイリアスの設定
・スライスの作成と書き出し

○自動処理とスクリプト
・コンタクトシートの作成

学習するソフト
Adobe Photoshop CC

◆ テキスト情報 ◆

photoshop cc テキスト販売イメージ
Photoshop CCのアプリ
①基本知識と基本操作
②レイヤーと色調補正
③RAW画像やテキスト
の内容をこの1冊で解説しています。
副読本としてアプリと併用すると学習効果が倍増します。テキストご購入は代金引換でお届けします。(別途代引き手数料)
ご注文は、info@a-flat.bizへお願いします。
・お名前
・メールアドレス
・発送先住所
・電話番号
・テキストタイトル
・数量
を記載の上、件名に「テキスト購入希望」と入力し、ご送信ください。

Illustrator CC

基本知識と基本操作文字とパターン画像とブラシCSSとSVGコードの利用
Illustrator CC 基本知識と基本操作

ベクトル形式とビットマップ形式のアートワークの違いやメリット、カラーモードRGBとCMYKの知識と特徴、スクリーンや媒体に合わせたドキュメントの作成や設定方法など基本知識が学べます。
サイズや向きの異なる販促物をひとつのドキュメントに作成し、共通のオブジェクトをアートボード間で効率的に利用できます。
アートワークを作成したりレイアウトする時、ひとつひとつのパーツを選択するのか、オブジェクト全体を選択するかに合わせて正確にオブジェクトを選択する理解や、シェイブの作成、オブジェクトの変形や整列、グループ化、オブジェクトの合成について学べます。

この章のサンプルファイルをダウンロードする

目次
・Illustratorで扱う画像について
・新規ドキュメントの作成
・Illustratorのインターフェイス
・オブジェクトの基本操作-1
・オブジェクトの基本操作-2
こんなユーザーにおすすめ!
■ベクトル形式とビットマップ形式の違いに戸惑う方
■複数のアートボードを効率的に使いたい方
■オブジェクトの基本操作を身につけたい方
■最新のIllustratorを覚えたい方
■DTPやWebデザイン業界で就職・転職を目指す方
ここで学べる機能
○Illustratorで扱う画像について
・ ビットマップとベクトル
・ カラーモード○新規ドキュメントの作成
・ 新規ドキュメントの作成
・ ファイルの保存
・ ファイルを開く

○Illustratorのインターフェイス
・ Illustratorのインターフェイス
・ ドキュメントの基本操作
・ アートボード

○オブジェクトの基本操作
・ オブジェクトの選択
・ シェイプツールを用いたオブジェクトの作成
・ 塗りと線のプロパティ
・ オブジェクトの変形
・ オブジェクトの整列・分布・グループ化
・ パスファインダーを使ったオブジェクトの合成

Illustrator CC 文字とパターン

直線と曲線で構成され、解像度に依存しないベクトル図形を作成するのに必要なパスの操作の知識を学び、なめらかなオブジェクトを作成します。
あらかじめテキストファイルに用意した文字を利用する方法、フォントの設定、パスに沿ってユニークな形状で訴求力のあるタイトルを作成したり、たくさんのオブジェクトを効率的に管理するためにレイヤーを利用する方法、スウォッチパネルを使いこなして、より正確にカラーを選択したり、オリジナルパターンを作成して適用する方法などが学べます。

この章のサンプルファイルをダウンロードする

目次
・パスの基本操作
・文字の入力-1
・文字の入力-2
・レイヤーとアピアランス-1
・レイヤーとアピアランス-2
・色とパターンの設定
こんなユーザーにおすすめ!
■パスの操作に苦手意識のある方
■文字の改行や調節がうまくいかない方
■オリジナリティのあるタイトル文字を作成したい方
■レイヤーやアピアランスの知識を見につけたい方
■スウォッチパネルの扱いが難しいと感じる方
■最新のIllustratorを覚えたい方
■DTPやWebデザイン業界で就職・転職を目指す方
ここで学べる機能
○パスの基本操作
・ パスの基本操作
・ 鉛筆ツールとブラシツール○文字の入力
・ ポイント文字とエリア内文字
・ 文字の設定
・ パスに沿った文字入力と文字タッチツール
・ スレッドテキスト
・ アウトライン

○レイヤーとアピアランス
・ レイヤーの基本操作
・ アピアランスの設定
・ 編集モード

○色とパターンの設定
・ カラーとスウォッチ
・ グラデーションとパターンの設定

Illustrator CC 画像とブラシ

複数の画像をまとめて選択し、それぞれの場所にスピーディーに配置できます。後から追加してはみ出した画像をグループに含めて配置したり、Photoshopを呼び出して操作を行う方法、画像をトレースしてベクトルオブジェクトとして利用する方法が学べます。
フリーハンドでパスを描けるブラシはそのまま使ったり、デザインとして用いたり、幅広く活用できるツールです。囲み線にパターンブラシを適用すればコンテンツのデザインが華やかでオリジナリティのあるものに仕上がります。

この章のサンプルファイルをダウンロードする

目次
・画像の配置-1
・画像の配置-2
・ブラシ
・オブジェクトの効率的なカラーリング
・出力時に利用する機能
こんなユーザーにおすすめ!
■画像の配置や追加を行いたい方
■画像のトレースを身につけたい方
■ブラシを活用したい方
■色を効率的に効率的に扱いたい方
■最新のIllustratorを覚えたい方
■DTPやWebデザイン業界で就職・転職を目指す方
ここで学べる機能
○画像の配置
・ 画像のリンクと埋め込み
・ 画像の切り抜き(クリッピングマスク)
・ Photoshopとの連携
・ 画像トレース○ブラシ
・ ブラシツール
・ ブラシ定義と種類
・ 画像ブラシ
・ コーナータイルの自動作成

○オブジェクトの効率的なカラーリング
・ ライブペイント
・ オブジェクトを再配色

○出力時に利用する機能
・ ドキュメント情報の確認
・ オブジェクト単位の選択と不要な要素の削除
・ アートボードごとの保存とPDFでの保存

Illustrator CC CSSとSVGコードの利用

Illustratorで仕上げたプロトデザインからCSSを抽出することができます。ぜひ活用していただきたい機能です。
抽出したコードをコピーしてDreamweaverに貼り付ければ手早くWebサイトデザインに利用できます。
また、作ったオブジェクトを書き出して保存しなくても、SVGのコードとして抽出しイラストとして出力することができます。

この章のサンプルファイルをダウンロードする

目次
・CSSプロパティパネルとSVGコードの書き出し
こんなユーザーにおすすめ!
■CSSの抽出をおこないたい方
■Dreamweaverと連携して使いたい方
■SVGコードを使ってイラストを出力したい方
■最新のIllustratorを覚えたい方
■DTPやWebデザイン業界で就職・転職を目指す方
ここで学べる機能
○ CSSプロパティパネルとSVGコードの書き出し
学習するソフト
Adobe Illustrator CC

◆ テキスト情報 ◆

Illustrator cc テキスト販売イメージ
Illustrator CCのアプリ
①基本知識と基本操作
②文字とパターン
③画像とブラシ
の内容をこの1冊で解説しています。
副読本としてアプリと併用すると学習効果が倍増します。テキストご購入は代金引換でお届けします。(別途代引き手数料)
ご注文は、info@a-flat.bizへお願いします。
・お名前
・メールアドレス
・発送先住所
・電話番号
・テキストタイトル
・数量
を記載の上、件名に「テキスト購入希望」と入力し、ご送信ください。

Dreamweaver CC

サイト定義と基本操作コードビューとCSSレスポンシブWebデザインとサイトの公開
Dreamweaver CC サイト定義と基本操作

HTMLやCSSを直感的に作成できるWebページ作成ソフトであるDreamweaverは、PHPやJavaScriptなどのプログラム言語にも対応しています。
サーバーと対応するフォルダの設定を定義しておけば、作成したサイトを簡単にサーバーに転送できます。
画像はドラッグアンドドロップで配置でき、直感的な操作ができます。複数のファイル間でのリンク設定もパスを直接入力せずに設定できます。

この章のサンプルファイルをダウンロードする

目次
・Dreamweaverのインターフェイス-1
・Dreamweaverのインターフェイス-2
・サイトの定義
・ドキュメントの新規作成-1
・ドキュメントの新規作成-2
・画像の挿入-1
・画像の挿入-2
・リンクの設定
こんなユーザーにおすすめ!
■Dreamweaverの基本知識を学びたい方
■サイト定義をしたい方
■Webページに画像やビデオを挿入したい方
■リンクを設定したい方
■最新のDreamweaverを覚えたい方
■Webデザイン業界で就職・転職を目指す方
ここで学べる機能
○Dreamweaverのインターフェイス
・ Dreamweaverのワークスペース
・ ドキュメントウィンドウ
・ ワークスペースの切り替えとカスタマイズ○サイトの定義
・ サイトの定義
・ ファイルパネル

○ドキュメントの新規作成
・ 新規ドキュメントの作成と保存
・ テキストの入力
・ マークアップ
・ メタ情報の追加

○画像の挿入
・ 画像の挿入
・ ビデオの挿入

○リンクの設定
・ リンクの設定

Dreamweaver CC コードビューとCSS

要素に応じて利用できる属性をすべて覚えるのは大変ですが、Dreamweaverではコードヒントの機能で適切な属性が表示され、手早く操作できます。
CSSとは何か、基本的な設定方法、スタイルを初期化する設定、画像を横並びにする方法などを実際の操作を確認しながら学べます。EdgeWebfontsでデザイン性の高いフォントを手軽にWebページに使用する方法も確認できます。

この章のサンプルファイルをダウンロードする

目次
・コードビューを使った編集
・要素のグループ化
・CSSの基本
・CSSの設定-1
・CSSの設定-2
こんなユーザーにおすすめ!
■要素や属性の扱いを覚えたい方
■CSSの基本を学びたい方
■ボックスモデルを使いたい方
■Edge Webフォントを利用したい方
■最新のDreamweaverを覚えたい方
■Webデザイン業界で就職・転職を目指す方
ここで学べる機能
○コードビューを使った編集
・ HTMLの要素と属性
・ コードヒント
・ タグの挿入と編集○要素のグループ化
・ div要素の挿入
・ id属性の設定

○CSSの基本
・ CSSとは
・ ボックスモデルの概要

○CSSの設定
・ 基本的な設定
・ CSSトランジション
・ CSSインスペクト
・ コードナビゲーター
・ Edge Webフォント

Dreamweaver CC レスポンシブWebデザインとサイトの公開

Webページをスマートフォンやタブレットなどのデバイスでも閲覧できるよう設定する方法が学べます。
パソコン向けに作られたWebサイトは小さなスクリーンサイズで表示すると大変見にくく、操作しにくいものになります。
レスポンシブデザインはCSSファイルでの制御によって、それぞれのデバイスに合ったレイアウトに調整されるように設定できます。スマートフォンやタブレットの利用者にとって使いやすいWebページ作成しましょう。

この章のサンプルファイルをダウンロードする

目次
・レスポンシブWebデザイン
・構造の定義とデザインビューでの操作-1
・構造の定義とデザインビューでの操作-2
・CSS-1
・CSS-2
・サイトの公開
こんなユーザーにおすすめ!
■スマートフォンやタブレットでも見やすいサイトを作りたい方
■グリッドレイアウトの知識を身につけたい方
■Webサイトの文法をチェックする方法を知りたい方
■最新のDreamweaverを覚えたい方
■Webデザイン業界で就職・転職を目指す方
ここで学べる機能

○レスポンシブWebデザイン
・ レスポンシブWebデザインの概要
・ 可変グリッドレイアウトの作成

○構造の定義とデザインビューでの操作
・ 要素の挿入
・ 可変グリッドレイアウトの編集
・ リストによるメニューの作成

○CSS
・ メディアクエリーとは
・ メディアクエリーの追加
・ CSSデザイナーを使用したスタイルの編集
・ 角丸ボタンの作成

○サイトの公開
・ アップロード
・ クローク
・ バリデート

学習するソフト
Adobe Dreamweaver CC

◆ テキスト情報 ◆

Dreamweaver cc テキスト販売イメージ
Dreamweaver CCのアプリ
①サイト定義と基本操作
②コードビューとCSS
③レスポンシブWebデザインとサイトの公開
の内容をこの1冊で解説しています。
副読本としてアプリと併用すると学習効果が倍増します。テキストご購入は代金引換でお届けします。(別途代引き手数料)
ご注文は、info@a-flat.bizへお願いします。
・お名前
・メールアドレス
・発送先住所
・電話番号
・テキストタイトル
・数量
を記載の上、件名に「テキスト購入希望」と入力し、ご送信ください。

Edgeツール&サービス

EdgeAnimate CCDreamweaverへの統合、Edge Reflow CC
Edgeツール&サービス EdgeAnimate CC

アニメーションやインタラクティブな要素が追加されたコンテンツを作成できるのが EdgeAnimate CC です。
画像をドラッグアンドドロップで設定したり、ステージ上にオブジェクトを配置して、プロパティパネルで柔軟に操作する方法が学べます。
効果的にアニメーションをつけたり、アニメーションさせるタイミングを設定する方法が学べ、リッチなコンテンツ作りに役立ちます。

この章のサンプルファイルをダウンロードする

目次
・プロジェクトの新規作成
・アセットの追加
・Edge Animate CCの基本操作
・テキストの追加
・アニメーション
・CSSフィルター
・アクションの設定
・レスポンシブレイアウトの作成
こんなユーザーにおすすめ!
■Flashに変わるアニメーション動画を作りたい方
■EdgeAnimateを覚えたい方
■効果的なアニメーションをつけたい方
■シンボルの操作を学びたい方
■Edge Webフォントを利用したい方
■Webデザイン業界で就職・転職を目指す方
ここで学べる機能
○プロジェクトの新規作成
・Edge Animate CCの概要
・Edge Animateのワークスペース
・ファイルの保存○アセットの追加
・アセットの追加

○Edge Animate CCの基本操作
・ツールの基本操作
・プロパティの設定

○テキストの追加
・テキストの入力とプロパティの設定
・Edge Webフォントの利用

○アニメーション
・アニメーションの作成
・シンボルとアニメーション

○CSSフィルター
・CSSフィルター

○アクションの設定
・アクションの設定

○レスポンシブレイアウトの作成
・レスポンシブレイアウトの作成

Edgeツール&サービス Dreamweaverへの統合とEdge Reflow CC

EdgeAnimateで作成したコンテンツはDreamweaverと統合することができます。ここでは統合方法や、アプリケーションの再ビルドについても学べます。
Edge Reflow CC はレスポンシブレイアウトに対応したモックアップの作成に最適なツールです。
可変グリッドレイアウトのページデザインを行えます。実際の操作方法を確認していきましょう。

この章のサンプルファイルをダウンロードする

目次
・Dreamweaverへの統合とPhoneGap Build
Adobe Edge Reflow CC を利用した
・レスポンシブレイアウトのモックアップ作成-1
・レスポンシブレイアウトのモックアップ作成-2
・レスポンシブレイアウトのモックアップ作成-3
・Adobe Edge Inspect CCを利用したデバイスでの検証
・Adobe Edge Code CCを利用した効率的なページ編集
こんなユーザーにおすすめ!
■Dreamweaverに統合する方法を知りたい方
■レスポンシブレイアウトを学びたい方
■スマートフォンやタブレットと同期させながらコンテンツを作りたい方
■Edgeツールを用いた効率的な操作を覚えたい方
■Webデザイン業界で就職・転職を目指す方
ここで学べる機能
○Dreamweaverへの統合とPhoneGap Build
・Dreamweaverへコンポジションを追加
・PhoneGap Buildでのアプリのビルド○Adobe Edge Reflow CC を利用したレスポンシブレイアウトのモックアップ作成
・Adobe Edge Reflow CCのインターフェイス
・プロジェクトの新規作成とコンテナの基本設定
・可変ボックスの配置
・メディアクエリーの追加
・画像の配置
・テキストの配置とEdge Web Fonts
・タブレット用のデザインの調整
・スマートフォン用のデザインの調整

○Adobe Edge Inspect CCを利用したデバイスでの検証
・Edge Inspectの導入設定
・Edge Reflowとの連携

○Adobe Edge Code CCを利用した効率的なページ編集
・Edge Code CCを利用した効率的なページ編集

学習するソフト
Adobe EdgeAnimate CC