カテゴリー別アーカイブ: テクニック(Dreamweaver)

Adobe Creative Cloud update!

先日、Adobe Creative Cloudのメジャーアップデート版がリリースされました。
イラレ、フォトショ、インデのスプラッシュスクリーンは以下の感じ。

実は前回から?
CC2017等の年号が付いていたのは、2014、2015、2017の3バージョンだけで、CC2018は我々が便宜上、そう呼んでいただけという事でしょうか。

それぞれのアプリのバージョンはバラバラで覚えにくいのでCC2019で通りそうです。

さて細かいアップデート内容などは後々触れていくとして
他の人がまだあまり触れていなかったり、私個人的に推したい所をピックアップでいきます 。
まず小さい所から
以前の「スタート」画面は、「ホーム」画面となり、お礼言われております。

▼CC2017のスタート画面

▼CC2019

ファイルを開いて通常作業してる場合でも、「ホーム」アイコンをクリックするとホーム画面に行けるようになりました。

これ私的に結構便利なのですが、一番欲しかったのは「InDesign」なんですよね…。
イラレ、フォトショ、インデの3つの中でインデだけ付いてない…。

そのInDesignに「プロパティ」パネルが付きました。これはかなり便利そうです。

イラレの話に戻りますと、2014~2018まであったロケットみたいなアイコンが無くなりました。
Mac、Win関係なく「環境設定」を開けたので便利でした。

ツールバー(以前はツールパネル)の中のツールが少なくなりました。詳細設定にするといつも通りとなりますが、ツールのカスタマイズも可能です。

「ウィンドウ」メニュー→「ツールバー」→「詳細設定」でも出ます。

そしてイラレの新機能推しはやっぱり「フリーグラデーション」。「グラデーションメッシ ュ」よりもペイント系に近い仕上がりとなります。

ポイントは増やしたり減らしたり、動かす事ができます。
(減らす場合は、オブジェクトの外へドラッグします。)

ポイントの色変更は、ポイント上でWクリックします。

「グラデーション」パネルも変わりました。でも今まで使ってた人なら何となく使いこなせそうな感じです。

続いてPhotoshop
長くなってきたので新機能はさておき、今まで使ってる人が戸惑いそうな変更点を。
「⌘」+「Z」(Mac)、「Ctrl」+「Z」(Win)で、どんどん戻れるようになりました。
逆にbefore、afterは
「⌘」「option」+「Z」(Mac)、「Ctrl」「Alt」+「Z」(Win)となっております。

更に自由変形等で拡大・縮小を行う場合、「Shift」キーを押さずとも縦横比が固定されるよ うになってます。縦横比固定じゃない場合に「Shift」キーを押すことになります。
これは慣れるまで少し大変かも。

対応OSやPCスペックもシビアになってますので注意が必要です。
Windowsは7と10のみとなっており、8は対象外。
MacもSierra、High Sierraのみとなっております。
PCスペックはアプリ毎で違ったりしますので、Adobeさんの公式HPより確認しましょう。
PCスペック

今回はここまでで以上です。

バンフートレーニングスクールでは、イラストレーターやフォトショップ、インデザインに Webサイト作成の講座を開講中です。

このブログを書いているスタッフ「ほ」と、スタッフ「の」をはじめとする印刷会社の研修部門のスタッフがアプリケーションの使い方を徹底レクチャー!

詳しくは、下記詳細ページをご覧ください。

イラストレーター講座の詳細

ご興味がある方は、ぜひ一度無料体験にお越しくださいませ。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Dreamweaver]プロパティがない?!

皆様、中秋の名月は楽しめましたでしょうか?

私は一日遅れで昨夜の月を楽しみました。気温もよくて、ゆっくり眺めることができました。

すごく綺麗でしたね。スタッフ「ほ」です。

さて、前回に続き、2回連続でのDreamweaverネタになります。

DreamweaverがCC2015になってからのネタをぜんぜん投稿していないことに気がつきました…

というわけで…CC2015ネタでいこうと思います。

掲題の「プロパティがない?!」ですが、Dreamweaver使いの方なら
おなじみすぎる画面下部のプロパティインスペクタ。

これが、cc2015を起動した時点で見当たりません……!?!

CCになってから、いろいろとチャレンジしているDreamweaver。

今回も思い切ったことをしましたね……

ただ、ビギナーの方が戸惑ってしまう原因になるかもしれません。

Dreamweaverを起動して、プロパティインスペクタが見当たらない場合、2つの方法で対処できます。

◇ 対処その1

「ウインドウ」メニューから「プロパティ」をクリックすることで表示することができます。

クリックすると、画面上部にパネルが開きますので…

ドラッグで画面下部まで持っていき、下のスクリーンショットでわかるでしょうか?
画面下部に水色のラインが出たところでマウスを放すと…

プロパティインスペクタが画面下部に固定されます。

◇ 対処その2

もうひとつの方法は、ワークスペースを変更する方法です。

「ウインドウメニュー」→「ワークスペースのレイアウト」をポイントすると、最初は「デフォルト」という項目が選択されているはずです。

この項目を「初心者」に切り替えます。

この指定で、いつもの見慣れた状態になると思います。

今回から、ファイルパネルとCSSデザイナーパネルが同じグループになっています。

これはこれで、個人的には使いやすくなったという印象ですが、これをバラしたい場合は、「CSSデザイナー」のタブをドラッグ&ドロップすると、パネルを切り離すことができます。

切り離したタブを挿入したい位置にドラッグ&ドロップすることで、別パネルとしてパネルグループに追加できます。

CC2015の導入で、戸惑った方は今回の記事が参考になれば幸いです。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Dreamweaver]タブを切り替えるショートカット

むむむ…いつの間にか秋になっておりました……

1か月以上も更新サボっておりました。すみません…

スタッフ「ほ」です。

今日は授業でいただいたご質問を皆様にもシェア。

Dreamweaverで複数のファイルを開いている場合、ファイル間の切り替えはタブで行います。

複数のページを行ったり来たりしながら作成をする際には、この切り替えをショートカットキーで行えるとスムーズです。

Windowsの場合は

次のタブ Ctrl + Tab

前のタブ Ctrl + Shift + Tab

Macintoshの場合は

次のタブ Command + 

前のタブ Command + Shift + 

Macのショートカットキーが左手で操作しづらいのが残念なところですが、キーボードショートカットは自分の好みに変更することができます。

Macの場合は、「Dreamweaver」メニューの「キーボードショートカット」をクリックした際に開くウインドウで指定ができます。

タブ切り替えのショートカットキーは慣れると本当に重宝しますので、ぜひぜひ試してみてください。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Dreamweaver]Extractパネル

土曜日に息子の七五三のお参りに成田山に行ってきました。

無事にご祈祷も終えて、食事をしてから帰ってきたのですが、帰宅してから傘を忘れたことに気がつき、2日連続で成田山に行くはめになったスタッフ「ほ」です。

皆様も傘のお忘れ物には気をつけましょう。

さて、今回もDreamweaverの10月アップデート分のネタからです。

今回、Dreamweaverをアップデートして起動すると、最初にこんな画面構成になります。

いつも画面右側に出ているパネル群は折りたたまれた状態になっており、画面左側に「Extract」というパネルが開いています。

「ウインドウ」メニューから「ワークスペース」→「デザイン」をクリックすることで、これまでのおなじみの画面構成にできますが、今回はこの「Extract」パネルに焦点を当ててみたいと思います。

実は私自身もよくわかっていなかったので、今回いろいろ実験しながら、このエントリーを書いております。

そもそもExtractパネルって何?

ひとことで言ってしまえば、「Photoshop形式(PSD)ファイルが開けるパネル」です。

Webページを作る際には、事前にデザインの完成見本図を作成します。この完成見本図のことを「カンプ」と呼び、Photoshopなどのグラフィックソフトで作成されます。

これまでは、Photoshopでカンプを作成したら、その中のロゴマークだったり、ボタンだったり、バナーだったりをWebページに入れるために「スライスツール」などを利用して切り出してからWebページに挿入していました。

今回、Dreamweaverに実装された、このExtractパネルを使えば、Photoshopを起動しなくても、Photoshopであらかじめ画像を切り出しておかなくても、Dreamweaver内で、各データを切り出して、そのままダイレクトにWebページに入れていくことができる、ってのが売りのパネルなんです。

……たぶん

1.まずはPSDをアップロードする

さて、使い方です。

パネルを確認してみると、パネル上部に「開始」というボタンが見えます。

これをクリックしてみましょう。

パネル内がこんな感じに切り替わります。ここで作成したPSDファイルをアップロードします。

画面中央にある「PSDをアップロード」ボタンをクリックします。

ファイルを選択すると、アップロードが開始されます。ちなみに、このファイルはCreative Cloudのサーバーのアセットフォルダにアップロードされるため、うっかりPC側のカンプを削除してしまっても、いつでもここで呼び出すことができます。

アップロードが完了したところです。

アップロードが完了したら、アイコンをクリックすることで、Extractパネル内にカンプが開きます。

……と、あれれ?なぜか一部のレイヤー表示が飛んでしまっています。

むぅ、PhotoshopでPSDファイルを確認しましたが、何が基準で表示されてないのかがわかりませんでした。

が、パネル上部にある「レイヤー」をクリックすると、Photoshopの各レイヤーを確認・操作することができます(すごい!)が、ここでは、ちゃんとすべてのレイヤーが存在しておりました。

まぁ、大丈夫だろう、と勝手に思い込み先に進んでみます。

2.CSSをカンプから抽出する

さて、次に画像を挿入したいファイルを用意します。

DIVボックスは、あらかじめ作成する必要があるので、DIVボックスを作成し、サイズを整えておきます。

この際、DIVボックスのサイズを指定するのにExtractパネルが利用できます。

カンプ内で各ボックスに当たる部分のフチをクリックすると、ポップアップで該当オブジェクトのサイズが表示されます。

上記はヘッダーのサイズを調べたところです。この中で利用したい項目(今回はwidth欄とheight欄の両方)にチェックを入れた上で、「CSSをコピー」をクリックします。

続いて、「CSSデザイナー」パネルに移り、セレクター欄に「#header」を追加して右クリックします。

コンテキストメニューの「スタイルをペースト」を実行すると、カンプからコピーしたwidthとheightがCSS内に反映します。

3.一部の画像を書き出す

今、サイズを指定したヘッダーに背景画像を設置したいと思います。

そのためには、カンプから背景画像を書き出すわけですが、困ったことにカンプ内で背景画像が表示されておりません。

ですが、ダメ元で次の手順で行ってみました。

Extractパネルで、レイヤーを開き、headerのレイヤーグループをクリックして展開します。

今回、ヘッダーの背景として利用したいのが「メイン画像」レイヤーと「画像下部のかげり」レイヤーなので、その2つをShift+クリックで複数選択します。

選択ができたら、横にあるこのマークをクリックします。

すると、「保存先」「ファイル名」「ファイル形式」を指定するウインドウが開きます。

そこで、ここでは次のように指定をしました。

保存先→imagesフォルダに保存をしたかったので、保存先をimagesに変更
ファイル名→header_bgに変更
保存形式→JPGに変更

ファイル形式は、JPGを指定すると画質の設定が行えるようになります。ここでは変更せずに80のままとしました。

保存ボタンをクリックすると、指定した場所にファイルが書き出されます。

4.画像を直接挿入する

Extractパネルを使うと、カンプから画像を直接ページに挿入することもできます。

先ほどのヘッダーにロゴマークを挿入してみます。

なお、この作業はライブビューでないとできないため、「ライブ」ボタンを押してライブビュー状態にしておきます。

カンプ内からロゴマークをドキュメントウインドウにドラッグ&ドロップします。

この際、ドキュメントウインドウ内には画像挿入される位置にグリーンのラインが表示されますので、それを目安に位置を決めます。

すると、ファイル名指定のダイアログが表示されます。

ここでファイル名を決定するわけですが、今回のように画像をimagesフォルダに保存する場合は、相対パスで「images/」をつけることで、imagesフォルダに保存されます。

Enterキーで確定すると、「アセットを抽出しています」というメッセージの後、一度、このような画像が破損したアイコンが表示されてドキッとしますが、

そのまま待っていると、無事にロゴマークが挿入されました。

このように、Photoshopとアプリケーションを行ったりきたりせずに、Dreamweaverの中だけでデータの切り出しと挿入ができるのは、かなり便利ですね。

これまで、Photoshopでカンプを作っていた人には朗報ですので、ぜひお試しください。これまでイラレでカンプを作っていた方は、この機会にPhotoshopでのカンプ作成にチャレンジしてみてはいかがでしょう?

「いや、そもそもPhotoshopの操作がわからない!」という方は、ぜひバンフートレーニングスクールのPhotoshop講座へ!

Dreamweaver講座とあわせてお待ちしております。

バンフートレーニングスクールでは、DreamweaverやPhotoshopがそれぞれ最短2日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。
スクールの雰囲気を感じていただける無料体験も行っておりますので、ぜひお気軽にご参加ください。

Dreamweaver講座詳細http://www.vanfu-vts.jp/landing/dw.html
Photoshop講座詳細http://www.vanfu-vts.jp/landing/ps.html
無料体験http://www.vanfu-vts.jp/lesson_e/index.html
資料請求https://www.vanfu-vts.jp/cgi-bin/contact/request.php

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Dreamweaver]CC2014 10月アップデート分での変更

みなさんこんばんは

カップヌードルは断然シーフード派のスタッフ「ほ」です。

10月にAdobe CC2014のアップデートがありました。

CC2014の名称のままなので、大した変化はないだろうと高をくくっていたら、まぁ、いろいろ変わっておりました。

ということで、とりあえず気になった変化をアップしていきたいと思います。

起動画面。絵が変わりました。何の絵なのかはわかりません。

起動して、まず気が付くのが、パネルがいろいろグルーピングされました。

以前は別々だったCSSデザイナーパネルとファイルパネルが一緒になっています。

CSSデザイナーパネルは、なるべく大きく広げた方が使いやすいので、私はいちいちファイルパネルをたたんでいましたが、今回のように統合してくれた方が使いやすいですね。

また、これまでは別々に存在していた「デザイン」ボタンと「ライブ」ボタンがグルーピングされました。

これでうっかり「ライブ」を押してしまうって心配が減りそうですね

そして、これまでは画面上部にあったドキュメントのタイトル欄が、画面下部のプロパティインスペクタ内に移動しました。

これまでは上にあるのが当たり前のものでしたので、かなり新鮮です。

とりあえず起動してざっと目を走らせたところでは、このあたりが違いです。

この後、もう少し使ってみて、また違いがたまってきたら次回のエントリーでアップしたいと思います。

 

バンフートレーニングスクールでは、ドリームウィーバーが最短2日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。
無料体験も行っておりますので、ぜひお気軽にご参加ください。

ドリームウィーバー講座詳細  http://www.vanfu-vts.jp/landing/dw.html
無料体験  http://www.vanfu-vts.jp/lesson_e/index.html
資料請求  https://www.vanfu-vts.jp/cgi-bin/contact/request.php

 

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ