カテゴリー別アーカイブ: CCの機能

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]CC 2014の新機能

先週、Creative Cloudのアップデートが行われましたね。
私スタッフ「ほ」も、スタッフ「の」と一緒に新しいCC 2014を試してみました。

今回は、Dreamwever CC 2014の新機能について触れていきたいと思います。

起動時の画面はこんなのになりました。

「四角い大きなキービジュアルの下にアプリ名」という形が、CSシリーズになる前のAdobeソフトを彷彿とさせますね。かっこいい

起動直後の画面も少し変わりました。
新規作成欄がアイコン化され、クリックしやすくなりました。

ファイルを開いてみると、タグセレクターのデザインが変わっています。

▼これまではこんな感じでした

▼CC2014では、こうなりました

使い方は、基本的に変わらないと思っていただいていいのですが、気になるのが一番左についた、このマーク。

この新しく搭載されたアイコンは「エレメントクイックビュー」という機能のアイコンです。

ちょっと触ってみたら、なかなか便利な機能でした。

ちょっとわかりやすい例でいきましょう。

例えば、以下のようなリストを作成したとします。

いずれかの果物の中にカーソルを立てて、エレメントクイックビューアイコンをクリックすると、こんな表示が出てきます。

現在選択している(カーソルを立てている)場所の構造をツリー状で表示してくれています。

で、例えば、この果物の順序を入れ替えたい場合…

これが今まで微妙に面倒だったんですよ。

リストの入れ替えはカット&ペーストでできますが、<li>のタグごと入れ替えなければならないので、タグセレクターを細かくクリックして、入れ替えてました。

それでもうまくやらないと、ソースコードが汚くなるので、もうコードビューで直接ソースを編集しちゃえ!って方が早かったり…

が、今回のエレメントクイックビューを使えば…

この「ぶどう」を「バナナ」の上に持ってこようと思ったら、

ビュー内で3番目の<li>を1番目と2番目の<li>の間にドラッグで移動します。

結果、項目が入れ替わります。

この入れ替え以外にも、複製や削除なども行うことができます。

これ、使いこなせばかなり手助けになってくれそうな気がします。

CCを契約されている方は、ぜひCC2014をインストールして試してみてください。

※ちなみにCC2014をインストールしてもCCが消えることはないので、両方使うことが可能です。

さて、今日はここまでにしてみますが、今後もCC2014の新機能、少しずつご紹介していきたいと思います。

バンフートレーニングスクールでは、ドリームウィーバーを最短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. お問合せ

[Dreamweaver]CCでのCSSルール作成

すっかり秋めいてきましたね。

過ごしやすい天気なので、休みの日は、お弁当持って公園へ…と行きたいところですが、なぜか休みの日は天気がイマイチな日が続いているスタッフ「ほ」です。

んー、まぁ、次の3連休は大丈夫でしょう。

さ、久しぶりの更新です。

ずーっと先延ばしにしていましたDreamweaverCCについて触れていこうと思います。

今回は、CCからガラッと様変わりしたCSSパネルまわりについてです。

Dreamweaver CS6まで、CSSを扱うパネルは「CSSスタイル」パネルでした。

こんなパネルですね↓

「すべて」と「現在」のモードを切り替えて使用するパネルです。

スクールの講習では主に「すべて」を利用していました。

これがCCから、「CSSデザイナー」パネルに変わりました。

かなり使い方が変わりまして、スクールで授業を受けた後にCCを使われた方は
「え?え?」となった方もいらっしゃるんじゃないでしょうか。

ここでは、講習で行っている内容をCCでやる場合はどうするのか?をテーマに説明していきたいと思います。

01.CSSファイルを読み込む

外部CSSファイルをHTMLページに読み込む場合、CS6までは、CSSスタイルパネル下部にある「スタイルシートを添付」アイコンをクリックしてファイルを読み込んでいました。

CCでは「CSSデザイナー」パネル内にある「ソース」欄の「+」マークをクリックし、メニューから「既存のCSSファイルを添付」をクリックします。

ダイアログが開いたら、「参照」ボタンで読み込むCSSを指定し、「OK」をクリックします。

パネルの「ソース」欄に読み込んだCSSファイル名が表示されたのを確認しましょう。

02.新規ルールを追加する

CS6までは、新たにCSSルールを作成する場合、CSSスタイルパネル下部にある「新規CSSルール」アイコンをクリックして…

この画面が出てきたら、「セレクタータイプ」「セレクター名」「ルール定義」を指定して「OK」を押してから、装飾を行っていました。

CCでは、以下の手順で、ルールを作成します。

h2に対して、色をつける作業を例に説明していきます。

  1. ドキュメントウインドウ上でh2要素内にカーソルを立てて、タグセレクターから<h2>をクリックしておく
  2. CSSデザイナーパネルの「ソース」欄から、ルールを定義するCSSファイルをクリック選択する。
  3. 同パネルの「セレクター」欄にある「+」マークをクリックする。
  4. セレクター欄に「body h2」という子孫セレクターができあがるので、「h2」に調整する
  5. 同パネルにある「プロパティ」欄から、「テキスト」アイコンをクリックし、「color」プロパティ欄で文字の色を指定する。

以上で、h2要素に色がつくはずです。

最後のパネルの「プロパティ」欄に関しては、「テキスト」というカテゴリをクリックしなくても、すべてのプロパティが縦に並んでいる状態なので、どのカテゴリに入っているかわからなくても、上から順に見ていけば、必要なプロパティは見つかると思います。

また、手順4まで進めば、そのあと、プロパティインスペクタにあるカテゴリを「CSS」に切り替えて「ルールの編集」ボタンを押せば、CS6までお馴染みのCSSルール定義ダイアログが開きますので、ここで設定してもOKです。

ただ、CSSデザイナーパネルのプロパティ欄は、CSSルール定義ダイアログでは指定できない内容も盛り込まれていますし、例えばtext-alignプロパティやtext-decorationプロパティも視覚的にわかりやすくなったので、今後のことを考えれば、CSSデザイナーパネルになれちゃった方がいいかもしれません。

03.HTMLの<head>内にCSSルールを作る

HTMLの単一ページにCSSを適用するため、<head>内にCSSを記述したい場合、
CS6までは、新規CSSルールダイアログにて、「ルール定義」から「このドキュメントのみ」を指定していました。

CCでは、CSSデザイナーパネルの「ソース」欄にて「+」マークをクリックし、「ページで定義」をクリックすると、ソース一覧に<style>が追加されるので、前項の作業手順2にて、この<style>を選択することで、<head>内にCSSルールが記述されます。

04.作成したルールを別のCSSファイルへ移動する

例えば、index.cssに作りたかったルールを、うっかり間違えてcommon.cssに作成してしまった場合、CS6までは、CSSスタイルパネル内で、ルールをindex.cssにドラッグ&ドロップすることで移動ができていました。

CCでは、パネルの「セレクター」欄から、移動したいルールを「ソース」欄にある移動先のCSSファイルへドラッグ&ドロップすることで移動が可能です。

——————————————————-

と、ここまでCS6以前とCCの違いをお話してきました。

CCのCSSデザイナーパネルは、CS6までのCSSスタイルパネルの「すべて」と「現在」モードが混在したような感じなので、慣れるまで戸惑うことがあるかもしれませんが、慣れてしまえば直感的に使える部分も多そうなので、まずはたくさん触ってみましょう。

今後も、少しずつCCネタを追加していきたいと思います。

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

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