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. お問合せ

[Photoshop]フォトショップの変数を使ってみよう その2

皆様、こんにちは
スタッフ「ほ」です。

もう9月ですね。早い。

息子は長い夏休みを堪能した後、あきらめたように学校に通っています。

一方で家内は家で自分の時間を取り戻して安息の日々を送っています(笑

みなさまはどんな夏休みでしたか?

————–

さぁ、今回は前回に引き続きPhotoshopの変数を使っていきましょう。

ちなみに前回のエントリーを読んでない方は、ぜひ↓から読んでみて下さい。

[Photoshop]フォトショップの変数を使ってみよう

前回のエントリーでは、内容を変更するレイヤーを変数にすることで、文字を手軽に入れ替えることができるようになりました。

今回は、文字以外の要素として画像の取り扱いを変数でおこなってみたいと思います。

素材は前回同様、この画像です。

今回のサンプル

前回は8月の「8」が入っているレイヤーを変数にしました。
その後、商品名のレイヤーも変数にしてあります。

現在のレイヤー状況

今回はメインの写真を変数にしますので、「写真」レイヤーを選択して、「イメージ」メニュー→「変数」→「定義」をクリックして、下記のダイアログを表示します。

変数ダイアログ

前回と異なるのが、今回は文字ではなく画像を含むレイヤーを指定しているため、変数の種類が「テキストの置き換え」ではなく、「画像の置き換え」になっているところです。

画像の置き換え

「画像の置き換え」にチェックを入れ、「名前」欄に任意の名前を入力したら「置き換え方法」を選択します。

ドロップダウンで出てきますが、それぞれの意味がイマイチわかりませんよね?

画像の置き換え欄

でもきちんと下の説明欄に解説が出てきます。親切設計!

フィット

フィル

変更なし

バウンディングボックスに合わせる

ただ、「変更なし」以外がよくわからないので、一通り試してみましょう。

まずは「フィット」を選んでみます。

「フィット」では、新しく配置する画像がカンバスよりも大きい場合、写真全体が表示される倍率まで自動的に縮小してくれます。

画像サイズが小さい場合はカンバスからはみ出ないギリギリのサイズまで拡大をしてくれます。

が、気を付けたいのが、差し替える写真の縦横比が現在のカンバスと違う場合、写真を差し替えた後に空白部分ができてしまいます。

左右に余白ができてしまう

「バウンディングボックスに合わせる」にすると、元の写真と同じサイズにしてくれますが、縦横比が異なっていると写真が縦か横に引き伸ばされてしまいます。

画像が横に引き伸ばされる

まぁ、今回は素材が素材なので、多少引き伸ばされてもわからないんですけどね(汗

そこでおススメなのが「フィル」です。

説明では

フィル

“拡大”という表現しかされていませんが、新しく配置する画像の方が大きい場合、縮小もしてくれます。

縦横比が固定される

そして、「フィル」の指定では、カンバスが埋まるように配置をしてくれます。縦横比は維持しますので、多少はみ出る部分が発生することに注意しましょう。

では、実際に写真を差し替えてみましょう。文字も一緒に変更していきます。

ダイアログ左上の「定義」を「データセット」に切り替えます。
ダイアログを閉じてしまっている場合は「イメージ」メニュー→「変数」→「データセット」で開きます。

定義をデータセットに切り替える

ダイアログ下部の各変数の項目をクリックして、値を打ち換えていきます。

各変数の値を変更する

打ち換え終わったら「適用」→「OK」をクリックしてみましょう。

画像と文字が差し変わっていれば成功です。

文字と画像が差し変わった

文字の色がどうしてもさわやかな感じがしてしまうので、色を変えたいパーツをレイヤーグループにしておき、レイヤーグループに対して色相彩度などをかけておくと色の変更も容易かと思います。

色調補正をレイヤーグループにかける

色を変更した

うまくできましたか?

前回と今回で、変数による画像と文字の差し替え方をご紹介しました。

変数では、もうひとつできることがあるのですが、長くなってしまったので、それはまた次回のエントリーでご紹介したいと思います。

バンフートレーニングスクールでは、このブログを執筆しているスタッフ「の」や、わたくしスタッフ「ほ」がインストラクターをつとめるフォトショップの講座を開講しています。

無料体験もありますので、ご興味がある方はぜひお気軽にご参加ください。来ていただいた方にはプレゼントもありますよ!

バンフートレーニングスクール 無料体験ページへ

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

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

[Illustrator] 夏のイラスト特集!

今回は、「回転ツール」を使用した花火の作成と「線幅ツール」を使用してスイカの模様、おまけに「スパイラルツール」と3D効果で蚊取り線香にチャレンジしたいと思います。
201808PhotoshopTop2
00
まず、花火の作成から。
「表示」メニュー→「グリッドを表示」でグリッドを表示しておきます。
01

表示されたグリッドを活用して「楕円形ツール」を使用して楕円を3つ、「直線ツール」等を 使用して直線2本を作成します。
(直線の線幅は長い方を6pt、短い方を5ptとして先端は丸くしております。)
02

直線は、「線」パネルを使用して「プロファイル」を「線幅プロファイル5」に設定します。
03

線と楕円に同じ色を指定し、グループ化しておきます。
04

グループ化したパーツを選択している状態で「回転ツール」に持ち替えます。
回転軸を移動したいのでカーソルをグリッドに合わせて、「option」キー(Mac)、「Alt」 キー(Win)を押しながらクリックすると「回転」ダイアログが表示されます。
角度に「30」と入力し、「コピー」をクリックします。
05 06

そのまま「⌘(command)」キー(Mac)、「Ctrl」キー(Win)を押しながら「D」キーを押すと変形の繰り返しが行われるので必要分複製します。
07

続いて少し小さめのパーツを15°ずらした位置に作成します。
08

「オブジェクトを再配色」等で色を変更しておきます。
09

回転軸をずらして30°ずつコピー移動します。
10

効果で「光彩(外側)」をかけて完成です。
11

続いてスイカの作成。
「楕円形ツール」を使用して楕円を描いてグラデーションを適用します。
12

スイカの模様は「鉛筆ツール」等で少しがたついてる感じで描きます。
13

「線幅ツール」を使用してランダムに線の太さを調整します。線を中心にして片側だけを太らせたり細らせたりする場合は、「option」キー(Mac)、「Alt」キー(Win)を押しながら ドラッグします。
14

線にグラデーションを適用します。
15

「透明」パネルで描画モードを「乗算」にするとこのような感じに仕上がります。
16

更に続いて蚊取り線香の作成。
「スパイラルツール」を使用して画面内をドラッグし、線幅と線の色を指定します。
17

続いて「効果」メニュー→「3D」→「押し出し・べベル…」を実行します。
ダイアログ左上のキューブを動かしてイメージに近い立体感が出るように調整します。
18

更に「効果」メニュー→「スタイライズ」→「ドロップシャドウ」を実行し影を付けます。
19

以上です。

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

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

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

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

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

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

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

[Photoshop]フォトショップの変数を使ってみよう

6月~7月にかけて身の回りのいろんなものが壊れました。

職場では無線LANのルーターが壊れ、教室の蛍光灯が立て続けに切れまくり、自宅では愛用していたCanonのプリンターと、通勤に使っている自転車のギア、そしてこの猛暑の中、寝室のクーラーが……

クーラーを買い替えたところ、物が壊れる現象はなんとか収まりましたが、あやうくクラッシャーのあだ名をつけられるところだったスタッフ「ほ」です。私が壊してるわけじゃないんですけどね

さて、前回まで数回にわたり書いてきたPhotoshopでの動画編集シリーズが一段落して、さて何のネタを書こう?とちょっとだけ悩みました。

同じくこのブログを執筆しているスタッフ「の」が便利機能、便利ツールをご紹介しているので、私は前回の動画のように

「機能の存在は知っているけれど、よくわかんないから使ったことがない」

って感じでみなさんが敬遠しがちな機能を

「あ、意外とカンタン。それなら使ってみようかな」

と思っていただくことに焦点をあててみようかな、と考えました。

そ・こ・で、今回のテーマは

「Photoshopの変数機能を使ってみよう」

でいきたいと思います。

なるべくみなさんが「難しい!めんどくさい!」と感じないように、1回の記事量をグッと抑えて書いていきますので、お付き合いください。
「まず、ここまでの文章が長いよ!」というツッコミが聞こえてきそうですが(笑)いってみましょー

そもそも変数って?

まずはここですよね。「変数」って何者?というお話。

プログラムの世界ではなくてはならないものですが、プログラミングに縁がない方はもう、この言葉を聞いただけで「ムリ!」ってなっちゃいますよね。

わかってもらいやすく、例を作ってみました。

※ちょっと長いので「変数が何なのかは知ってる」という方や「とりあえずやり方だけ知りたい」という方は、ここを読み飛ばしていただいても大丈夫です。

以下の文章をご覧ください。

山田

暑中お見舞い申し上げます。

先日はお忙しい中、弊社のブースにお立ち寄りいただきありがとうございました。
本日、山田様宛に新商品カタログをお送りいたしました。

お時間のある時にご覧いただけますと幸いです。

また改めてご挨拶にお伺いいたします。
暑さ厳しき折柄、山田様におかれましてもどうぞご自愛下さい。

 

ビジネスシーンで使いそうな暑中見舞いメールらしきものを書いてみました。

本来は、お世話になっている方一人一人に文面を考えて送るべきですが、まぁ、もろもろの事情で同じ文面で名前だけを変えてたくさんの人にメールを送りたい、といったこともあるでしょう。

メール文章をコピペして名前部分を書き換えて送信するだけなのですが、上記の文面では名前部分が3か所も出てきます。
その際に一か所でも名前の書き換えを忘れると、コピペしたのが丸わかりでとっても心象が悪いです。

そこで変数の登場です。

先ほどの文章を以下のように変更します。

<name>

暑中お見舞い申し上げます。

先日はお忙しい中、弊社のブースにお立ち寄りいただきありがとうございました。
本日、<name>様宛に新商品カタログをお送りいたしました。

お時間のある時にご覧いただけますと幸いです。

また改めてご挨拶にお伺いいたします。
暑さ厳しき折柄、<name>様におかれましてもどうぞご自愛下さい。

 

文中の「山田」部分を「<name>」に変更しました。

文章をこうしておいて

文章中の「<name>」を「山田」に入れ替えろ

という命令をすると1つ目と同じ文章になりますよね。

そしてこの命令をちょこっと変更するだけで名前を変えた文章がミスなく手軽に作成できるようになります。

この「<name>」にあたる部分が変数です。

変数は中身を入れ替えることができるもの、と覚えておきましょう。

Photoshopで変数を使う

さて、「変数は中身を入れ替えることができるもの」とお伝えしました。

Photoshopでの変数は、レイヤーを使います。

「中身を入れ替えられるレイヤー」を作るといったところでしょうか。

例を挙げて説明していきましょう。

こんなサンプルを用意してみました。

サンプル画像

この画像内には2か所に「8月」という文字が出てきます。この「8月」部分を毎月変更する作業が発生する、という設定で、ここを変数にしてみましょう。

レイヤー構造は以下のようになっています。

レイヤー構造※クリックで拡大します

「8」の部分を変更するわけですから、下記2つのレイヤーを「変数(=中身を入れ替えられるレイヤー)」にする必要があります。

今回変数にするレイヤー※クリックで拡大します

まずは「月(上部)」のレイヤーを選択します。

「イメージ」メニュー→「変数」→「定義」を実行して以下のダイアログを開きます。

変数ダイアログ

「レイヤー」欄が「月(上部)」になっていることを確認したら、変数の種類で「テキストの置き換え」にチェックをいれます。
これで、このレイヤー内の文字が入れ替えられるようになりました。

変数ダイアログの設定

レイヤーを変数にしたら、この変数に名前をつけておきます。先ほどの例だと<name>にあたる部分ですね。

最初についている「テキスト変数1」のままでもかまいませんが、ここでは「月」に変更してみました。

変数名を変更

「OK」をクリックしてダイアログを閉じます。

続けて「月(下部)」のレイヤーを選択して同じダイアログを開きます。

やはり「テキストの置き換え」にチェックをいれますが、名前は入力するのではなく、横の矢印をクリックで出てくるドロップダウンから先ほど作った「月」を選びます。

ドロップダウンから作成した変数を選ぶ

横に鎖マークで「月(上部)」にも同じ変数が適用されていることが示されます。

同一変数が複数レイヤーに適用されていることを示すマーク

「OK」をクリックします。

※ちなみに、2つのレイヤーを最初から両方とも選択しておいてから「イメージ」→「変数」→「定義」をおこなうと1回の指定で済みます。

ここでおこなったレイヤーを変数にする(中身を入れ替えられるようにする)ことを「変数の定義」と言います。
が、定義って言葉がそもそも難しいので覚えなくてもOKです。

さて、それでは数字を8月から9月に変更してみましょう。

「イメージ」メニュー→「変数」→「データセット」を実行して以下のダイアログを開きます。

変数ダイアログ(データセット)

この画面で文字内容を変更します。

なぜ「データセット」と呼ぶのか?は後々のエントリーでわかってくると思います。

今回おこないたいのは「8」を「9」に変更することです。

データセット欄から新しいデータセットを作成できる下記のアイコンをクリックします。

新規データセットを追加するアイコン

データセット1が作成されました。

新たにデータセットが追加された

それと同時に変数欄が操作できるようになりますので、名前から「月」を選択しておきます。

値欄に「9」を入力して「適用」をクリックします。

値を入力して適用

画面を確認すると、2か所の「8」が「9」に変更されているのがわかると思います。「OK」をクリックすれば確定です。

数字が書き換わった

さぁ、うまくできましたでしょうか?

今回はここまでにしておきたいと思います。

さて、まだまだこれだけでは「ふーーん………で?」って感じかと思いますが、後々の記事で少しずつ「おぉ、変数便利!」と思っていただけるようにしていきたいと思います。

—追記—————————————-
第二回のエントリー アップしました
[Photoshop]フォトショップの変数を使ってみよう その2
————————————————

バンフートレーニングスクールでは、このブログを執筆しているスタッフ「の」や、わたくしスタッフ「ほ」がインストラクターをつとめるフォトショップの講座を開講しています。

無料体験もありますので、ご興味がある方はぜひお気軽にご参加ください。来ていただいた方にはプレゼントもありますよ!

バンフートレーニングスクール 無料体験ページへ

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

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

[受講生作品]FUJI HOME

みなさまこんにちは。

梅雨が早々に明け、早くも夏の暑さが身に染みているスタッフ「ほ」です。

この暑さにダウン気味ではありますが、今年は大好きなチョコミントの当たり年で、新商品が毎月たくさん登場してるので、それを楽しみに夏を乗り切ろうと思います。

さて、話が大幅に脱線しましたが、今日は受講生の方が制作された素敵なWebサイトをご紹介します。

昨年夏から今年にかけてWebパックを受講していただいたYさんの作成されたサイトです。

FUJI HOME

FUJI HOME

株式会社フジホーム様のサイトで「魅せるエクステリア」という企業コンセプトを見事に表現した素晴らしいサイトに仕上がっています。

写真を全面に出していくサイトは重たくなりがちですが、画面のスクロールによって徐々に画像が読み込まれていくプログラムなどの工夫が凝らされており、快適にサイト閲覧がおこなえます。

ずっと眺めていても飽きない美しいエクステリアの写真から「もっとたくさん見てみたい」という要望を叶えてくれるベストのポジションにリンクが張ってあるなどの導線も見事。

PCでもタブレットでもスマホでも快適なデザインが提供されるレスポンシブデザインですので、どのようなシーンでアクセスをしてもしっかりと情報を得ることができるサイトです。

我が家の猫の額ほどの庭でも、お願いしたらすごく素敵空間に生まれ変わりそうです。今度相談してみたいと思います。

 

バンフートレーニングスクールでは、ホームページ作成が学べる講座をご用意しております。

Yさんが受講されたWebパックの詳細は以下をご覧ください。
Webパック

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

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

Vanfu Training Schoolのスタッフがお役立ち情報を発信中