[Photoshop] 水滴を加えて夏らしい画像に!

画像に水滴を加えて夏らしいイメージ画像を作成します。
「レイヤー」パネルを使用して背景レイヤーを複製します。(ショートカットは「⌘(command)」キー+「J」(Mac)「Ctrl」キー+「J」(Win))

ツールパネルから「楕円形ツール」を選択します。

画像内にドラッグで楕円を描きます。(「塗り」「線」ともになし)

「レイヤー」パネル内で「楕円形レイヤー」は「描画モード」を「オーバーレイ」、「塗り」は「0%」にしておきます。

「楕円形レイヤー」名の横をダブルクリックして「レイヤースタイル」ダイアログを出します。

ダイアログ内で「ベベルとエンボス」の項目を選択し、以下の設定を行います。(設定は画像解像度や水滴の大きさによって変わります)↓クリックで拡大します

続いて「シャドウ(内側)」の項目を選択し、以下の設定を行います。

続いて「ドロップシャドウ」の項目を選択し、以下の設定を行います。

最後に「光彩(内側)」の項目を選択し、以下の設定を行います。

水滴内に球体のゆがみを入れます。
レイヤーのサムネール上を「⌘(command)」キー(Mac)「Ctrl」キー(Win)を押しながらクリックすると、レイヤー内にある画像形状の選択範囲が作成されます。

この為に複製しておいたレイヤーを選択します。

「フィルター」メニュー→「変形」→「球面…」を実行し「球面」ダイアログで「量」の設定を行い「OK」します。

新規レイヤーを作成し、「ブラシツール」を使用して白いハイライトを加えます。

必要に応じて水滴のある楕円形レイヤーの不透明度を調整します。

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

フォトショップ講座詳細

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

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

[Adobe CC]Adobe Fonts を使用してみよう!Web編

なかなか梅雨が明けませんね。
おかげで家の空調代がかからずに少し助かっています。

駅までの坂道がつらくて初めての電動アシスト自転車を買いましたが、この天気でなかなか乗れていないスタッフ「ほ」です。

さて、前回のエントリーではスタッフ「の」がAdobe Fontsについてご紹介しました
で、そこで「DTP編」とついていたので、本人に「次回はWeb編を書くの?」と聞いたら「いえ、スタッフ「ほ」が書くと期待して…」という答えが返ってきてしまったので、今回のお題は…

「Adobe Fontsを使用してみよう Web編」としてお送りします。

フォント指定はCSSのfont-familyで

まずはWebサイトを作成するときのフォント指定の基本からおさらいしていきます。

Webサイトを作成する際、私たちがフォントの指定をおこなわないと、それぞれのブラウザが自分の好きなフォントを割り当てることになっています。

例えばIEならMS Pゴシック、Win版のChromeならメイリオ、といった具合です。

フォントの指定をする場合はCSSのfont-familyプロパティを使います。

body {font-family:Meiryo;}

ただし、例えばWindowsとMacintoshでは入っているフォントが異なったりしますので、カンマで区切って複数のフォントを第一希望、第二希望といった感じで指定をするのがセオリーです。

body {font-family:”Hiragino Kaku Gothic ProN”,Meiryo,sans-serif;}

閲覧者側のPCにもフォントが必要

ただ、Webのフォント指定で問題なのは、Webサイトを作る人のPCではなく、閲覧する人のPC内からフォントを呼び出して表示するため、閲覧者のPCに指定したフォントが入っていないと、望み通りのフォントで表示されません

PCにインストールされているフォントは、OSやバージョンによってさまざまです。

そう考えると、すべての人に同じフォントを見せるのはなかなか難しいことなのです。

Webフォント

そこで考え出されたのがWebフォントです。

Webフォントは、フォントをあらかじめインターネット上のサーバーに置いておき、閲覧者のPC内からではなく、このインターネット上のWebフォントを読み込んでもらうことで、すべての人に同じフォントを表示させようとする仕組みです。

Adobe FontsをWebフォントで利用する

Adobe CCユーザーが利用できるAdobe FontsもWebフォントとして利用が可能です。
しかも、利用方法はとってもカンタン。

ざっくりと使用までの流れをご紹介します。

前回、スタッフ「の」がご紹介している方法でAdobe Fontsの一覧ページに移動したら、画面右上にある「日本語モード」をクリックすると日本語フォントのみが表示されるようになります。

一覧から自分の使いたいフォントを探しますが、この時「サンプルテキスト」欄に任意の文字を入力すると、そこで入力された文字列が各フォント見本として置き換わります。イメージがつかみやすくなります。

利用したいフォントが決まったらフォントの説明下部にある</>をクリックします。

画面に「新規Webプロジェクトの作成」というダイアログが開きますので、「OK」をクリックしましょう。

次の画面では「新しいプロジェクト名を入力」欄に任意の名前を入力し、「作成」をクリックします。

次の画面でソースコードが発行されます。上の赤枠の中身をコピーしてHTMLファイルの~の間に貼り付けます。

下の赤枠内に表示されたCSSの設定をCSSコードに追加します。

以上で設定は完了です。

サンプルページを用意いたしました。下記リンクから確認してみてください。

サンプルページ

とってもカンタンですね。

Adobe Fontsには素敵なフォントがたくさん。
ぜひぜひ皆様も試してみて下さい。

バンフートレーニングスクールでは、ホームページの作り方を教える講座も開講中です!
HTMLとCSSを使ってホームページ作ってみませんか?
スマートフォンに対応したレスポンシブWebデザインサイトを作る講座もありますよ!

Web制作講座の詳細はこちら

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

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

[Adobe Fonts を使用してみよう!]

今回はとても使い易くなってると評判の「Adobe Fonts」DTP編って事でいってみます。
以前「Typekit」と呼ばれていたサービスがグレードアップして名称が変更になりました。
「Typekit」時代、プランによって使用できるフォント数に制限があったりと少し複雑な部分がありました。
「Adobe Fonts」は、制限もなく分かり易くなってます。そして使い方も簡単です。

まず「Adobe Creative Cloud」アプリから「フォント」をクリックします。
(Adobe IDでサインインを忘れずに)

「フォントを参照」をクリックするとブラウザソフトが立ち上がり、フォント一覧が表示されます。

後は使用したいフォントを「アクティベート」→「アクティブ」にしていくだけです。
太さ違い等、複数ある場合はその数が表示されています。
一気にアクティブにもできますし、選んでアクティブもできます。

更に「フォントパック」から入れば、一気にアクティブも可能です。

Adobe Creative Cloudアプリで沢山のフォントがアクティブになっている事が確認できます。

アクティブにすると様々なアプリで使用可能となり、InDesignの「OpenType機能」も使用できます。

【注意点】


フォントはPCにインストールされる訳ではなので、Adobe CCの契約が切れれば使用できなくなります。


DTPで使用の場合、AiやIDのネイティブファイルでの入稿は印刷屋さんに対応状況を確認した方が良いです。
(会社のセキュリティ都合上オフラインで使用してる場合があります)

さて「Adobe Fonts」の話ではないのですが、5月に「Adobe CC」関して「2つのメジャーバージョンのみが導入できるようにする」と発表がありました。
「Adobe CC」は、CS6以降の全バージョンが使用できる。というのも1つの売りだった気がするのですが、今後PCの買換え等ある場合は注意した方がよさそうです。
既に現状、CC2019と2018のどちらかしかインストールできません。
(Illustratorの場合、23がCC2019、22がCC2018です)

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

インデザイン講座詳細

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

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

[Illustrator]意外と知らない?カラーパネルの小技4選

5月ですね。

5月はスーパーやコンビニにチョコミント商品があふれ始める時期です。
今年も勢いよく新商品が次々と投入されております。

毎日コンビニにせっせと通って新商品を買いあさっているスタッフ「ほ」です。

さて、しばらくPhotoshopネタが続いておりますので、今回はイラレで行きたいと思います。

さらに、ここ最近は内容がニッチすぎたので、イラレ使う人なら誰でも使うであろう「カラーパネル」にスポットを当ててみたいと思います。

カラーパネル。みなさん使ってますよね?
使ってればなんとなく使えちゃうカラーパネル。でも、知っておくと便利な小技がいくつかあるんです。
今回は、そんなカラーパネルの小技をお伝えしたいと思います。

今回も長くならないように4つほど。

1.塗りと線の色を同じに

イラストレーターではオブジェクトの塗りと線に色を指定できますが、塗りと線に同じ色を指定したい場合、それぞれ指定するのはやや面倒です。

そんなときは、塗りに指定した色をそのままパネル上で線の上にドラッグ&ドロップすることで同じ色をコピーすることができます。
※その逆も可能です。

「塗りと線を同じ色に??なんで??」と思われる方もいるかもしれませんね。

例えば、線と塗りを同じ色で付けてあげれば、下のような面取りした四角形を描くことができます。

長方形に線を付けて、線パネルで角の形状を「ベベル結合」にするだけですね。

2.塗りと線の前後順を入れ替えずに色を指定

通常カラーパネルでは、塗りと線で色を設定したい方をクリックして手前に出してから色を指定します。

これが地味にめんどくさい。
そこで、カラーパネルのスペクトル上でクリックをする際に、Altキー(Mac:optionキー)を押しながらクリックしてみます。

すると、背面になっている要素側に色が指定されます。

3.色味を保ったまま濃度を変える

指定した色を、もう少しだけ濃く、もう少しだけ薄くしたい、といった場合、CMYKやRGBのスライダーを個々に動かすと、色味がずれてしまって「あ~~」ってなっちゃいますよね。

そんなときは、スライダーを動かす時にCtrlキー(Mac:Commandキー)を押しながら調整してみてください。
色味を変えずに濃度が変化します。
※ちなみにShiftキーでも大丈夫です。

4.スライダーの種類を手早く変える

イラストレーターって、時々カラーピッカーで色指定しても、オブジェクトに色がつかなくて(グレーになっちゃう)困ったことありませんか?

そういうときは、たいていカラーパネルのスライダーがグレースケールになっちゃってます。

カラーパネルの右上にあるメニューボタンから「CMYK」や「RGB」を指定することでまた色が使えるようになるのですが、これがオブジェクトごとだったりするとかなり面倒。

そこで、カラーパネルのスライダーの種類が自分の意図しているものと違っている場合は、パネル下部のスペクトル部分をShiftキーを押しながらクリックしてみましょう。クリックするたびに「グレースケール」→「RGB」→「HSB」→「CMYK」→「WebセーフRGB」と変化していきます。

覚えておくと結構便利ですよ。

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

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

[Photoshop] フィルター エフェクト編

今回は漫画やイラストにも使えるPhotoshopのフィルターテクニックでいきます。

先ずは流線(スピード線)から

「レイヤー」パネルを使用して新規レイヤーを作成します。

作成したレイヤーを選択して、「フィルター」メニュー→「描画」→「雲模様1」を実行します。

続いて「フィルター」メニュー→「ノイズ」→「ノイズを加える」を実行します。(雲模様を適用したのはこのノイズを加えるため)
「ノイズを加える」ダイアログで「量」はMAX!「分布方法」は均等でもガウスでもどちらでも良いです。「グレースケールノイズ」にはチェックを入れましょう。

更に「フィルター」メニュー→「その他」→「スクロール」を実行します。
「スクロール」ダイアログで、「水平方向右へ」はMAX!「垂直方向」は基本動かさず、「端のピクセルを繰り返して埋める」にチェックを入れます。

これで流線は完成です。

右側を透かして画像に合成

少し流線多かったので描画モードを「除算」にしてみました。

続いて「炎フィルター」

新規レイヤーを作成しておきます。
「ペンツール」を使用して炎の軌跡を作成します。

「フィルター」メニュー→「描画」→「炎」を実行します。
「炎」ダイアログで、「炎の種類」、「長さ」、「幅」、「角度」、「間隔」は見た目で調整します。

炎フィルターに使用したパスは、「パス」パネルで削除します。

流線と合わせてこんな感じになりました。

更に「指先ツール」を使用してこすって炎を伸ばしてみました。

もう一つ行ってみましょう!
光が降り注ぐイメージを作成してみました。

まずはベースとなる画像を用意します。(出来るだけスッキリしてるのがいいです)

「レイヤー」パネルを使用して新規レイヤーを作成します。
作成したレイヤーを選択して、「フィルター」メニュー→「描画」→「雲模様1」を実行します。

続いて「フィルター」メニュー→「ぼかし」→「ぼかし(放射状)」を実行します。
「ぼかし(放射状)」ダイアログでは、「方法」をズームを選択し、「ぼかしの中心」を移動(今回は左上に指定)、「量」をスライダーで調整します。(プレビューないのが痛い…)

そして「レイヤー」パネルで「描画モード」を「覆い焼きカラー」を選んで完成です。

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

フォトショップ講座詳細

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

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

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