作成者別アーカイブ: teacher

Photohop 斜めに色分けされた文字の作り方1

斜めに色分けされたテキスト

今回の記事では、上の画像のような、斜めに色分けされたテキストの作り方を紹介します。Photoshopで作成しますが、「選択範囲を読み込む」の使い方がポイントです。手順が長くなりますので、2回の記事に分けて紹介します。

手順

以下のような手順で作成できます。

  1. テキストを入力する
  2. 長方形ツールでパスを作成する
  3. 長方形のパスのアンカーポイントを1つ削除し、三角形を作る
  4. 三角形のパスから選択範囲を作成する
  5. 三角形の選択範囲を保存する ←今回の記事でここまで紹介
  6. 文字の形の選択範囲を作成する
  7. 「選択範囲を読み込む」で「現在の選択範囲との共通範囲」を読み込む
  8. べた塗りレイヤーを作成する(レイヤーマスクがかかる)
  9. もう一度文字の形の選択範囲を作成する
  10. 「選択範囲を読み込む」で「現在の選択範囲から一部削除」して読み込む
  11. べた塗りレイヤーを作成する(レイヤーマスクがかかる)

1. テキストを入力する

文字を入力します。色の境目がはっきりわかるような、太めの文字が映えます。

2. 長方形ツールでパスを作成する

文字を囲むように四角形のパスを作成

長方形ツールで「パス」を描く設定にして、文字全体が納まる長方形を作成します。

3. 長方形のパスのアンカーポイントを1つ削除し、三角形を作る

三角形のパス

ペンツールを使って、長方形の角のアンカーポイントを1つ削除し、三角形のパスにします。

4. 三角形のパスから選択範囲を作成する

パスパネルで選択範囲を作成

パスパネル下部の「パスを選択範囲として読み込む」ボタンをクリックし、三角形のパスから選択範囲を作成します。

5. 三角形の選択範囲を保存する

チャンネルに保存された選択範囲

選択範囲>選択範囲を保存 で、三角形の選択範囲をアルファチャンネルで保存します。 続きは、次回の記事で紹介します。

CSS3 CSSだけでいろいろな形の吹き出しを作る方法4 ~出っ張った部分がカーブした吹き出し~

出っ張り部分がカーブした吹き出し

3回にわたってCSSだけで吹き出しを作る方法を紹介しました。今回は、上の画像のような出っ張った部分がカーブした吹き出しの作り方を紹介します。今回の記事でCSSの吹き出しについては最後です。

出っ張った部分がカーブした吹き出しの作り方

出っ張り部分がカーブした吹き出しの作り方

カーブを表現するために、疑似要素の ::before と ::after を両方使います。背面の疑似要素は吹き出しの色にし、前面の疑似要素は背景の色にします。疑似要素はどちらも、要素本体の背面に表示したいので、z-index: -1; を指定して重ね順を変えます。

出っ張った部分がカーブした吹き出しのコード例

HTML

<p>sample</p>

CSS

body { background: #EEE; }
p{
 position: relative;
 width: 200px;
 height: 50px;
 margin: 30px;
 font-size: 18px;
 color: #fff;
 line-height: 50px;
 text-align: center;
 background-color: #009D78;
 border-radius: 10px;
}
p::before,
p::after {
 content: "";
 position: absolute;
 z-index: -1;
 width: 35px;
 height: 35px;
 border-radius: 50%; /*疑似要素を円形にする*/
}
p::before{
 bottom: -12px;
 left: 36%;
 background-color: #009D78;
}
p::after{
 bottom: -16px;
 left: 30%;
 background-color: #EEE; /*背景の色を指定*/
}

DEMO

出っ張り部分がカーブしている吹き出しデモ

CSS3 CSSだけでいろいろな形の吹き出しを作る方法3 ~考えているときの吹き出し~

前々回の記事前回の記事と、CSSだけで吹き出しを作る方法を紹介してきました。今回の記事では、漫画などで「考えていること」を表すときに使われる吹き出しのCSSを紹介します。

考えているときの吹き出しの作り方

考えているときの吹き出しの作り方

普通の吹き出しでは三角形になる部分が、この形の吹き出しでは円形になります。この部分は疑似要素の ::before と ::after を両方使って表現します。円形を作るには、widthとheightを指定したうえで、border-radiusの値を50%に指定します。

疑似要素の円の位置は、bottom や left で様子を見ながら調整してください。

考えているときの吹き出しのコード例

HTML

<p>sample</p>

CSS

p{
 position: relative;
 width: 200px;
 height: 80px;
 margin: 30px;
 font-size: 18px;
 color: #FFF;
 line-height: 80px;
 text-align: center;
 background-color: #009D78;
 border-radius: 50%;
}
p::before,
p::after {
 content: "";
 position: absolute;
 background-color: #009D78;
 border-radius: 50%; /*疑似要素を円形にする*/
}
p::before{
 width: 22px;
 height: 22px;
 bottom: -12px;
 left: 42%;
}
p::after{
 width: 14px;
 height: 14px;
 bottom: -26px;
 left: 35%;
}

DEMO

考えているときの吹き出し

次回記事では、普通の吹き出しで三角形の部分が、カーブした形になっている吹き出しの作り方を紹介します。次回の記事でCSSの吹き出しについては最後です。

CSS3 CSSだけでいろいろな形の吹き出しを作る方法2 ~ふち付きの吹き出し~

前回の記事で、CSSだけで作る基本の吹き出しを紹介しました。今回は、基本の吹き出しに少し手を加えた、ふち付きの吹き出しの作り方を紹介します。

ふち付きの吹き出しの作り方

ふち付きの吹き出しは、前回の記事で紹介した基本の吹き出しに少し手を加えれば作ることができます。基本の吹き出しと違うのは、要素本体にボーダーを付けることと、擬似要素で作る三角の部分に ::before と ::after を両方使うところです。

ふち付き吹き出しの作り方

吹き出しの三角形の部分は、擬似要素で作った2つの三角形を少しずらして重ね、ふちを表現します。背面の三角形はふちの色、前面の三角形は吹き出しの中の色にし、前面の三角形を上にずらします。どの程度ずらすかは、ブラウザで表示して様子を見ながら調整してください。正確にふちの幅を出したい場合、三角関数の計算になると思います。

また、縁の色をした三角形が吹き出しの上に表示されないように(三角形の縁が食い込まないように)、z-index: -1; を指定して要素本体より背面に表示させます。

ふち付きの吹き出しのコード例

具体的には以下のようなコードになります。

HTML

<p>sample</p>

CSS

p{
 position: relative;
 width: 200px;
 height: 50px;
 border: 1px solid #009D78; /*ボーダーを設定する*/
 margin: 30px;
 font-size: 18px;
 color: #009D78;
 line-height: 50px;
 text-align: center;
 background-color: #FFF; /*吹き出しの内側の色を指定する*/
 border-radius: 10px;
}
p::before{
 content: "";
 position: absolute;
 z-index: -1; /*要素本体より背面に表示*/
 bottom: -12px; /*::afterより下に表示*/
 left: 50%;
 margin-left: -10px;
 border-style: solid;
 border-color: #009D78 transparent transparent transparent; /*ふちの色の三角形を作る*/
 border-width: 15px 10px 0 10px;
}
p::after{
 content: "";
 position: absolute;
 bottom: -10px; /*::beforeより上に表示*/
 left: 50%;
 margin-left: -10px;
 border-style: solid;
 border-color: #FFF transparent transparent transparent; /*吹き出しの内側の色の三角形を作る*/
 border-width: 15px 10px 0 10px;
}

 DEMO

ふち付きの吹き出しデモ

次回記事では、「考えているときの吹き出し」を紹介します

CSS3 CSSだけでいろいろな形の吹き出しを作る方法1 ~基本の吹き出し~

以前「CSSだけで吹き出しを作る方法」という記事で疑似要素とボーダーを使ってCSSだけで吹き出しを作る方法を紹介しました。そのとき紹介したのは一番シンプルな見た目の吹き出しでしたが、違う形の吹き出しも作れますので、数回の記事に分けて紹介していきたいと思います。今回は、以前も紹介していますが、基本の吹き出しの作り方をもう一度紹介します。

基本の吹き出しの作り方

基本の吹き出しの作り方です。「CSSだけで吹き出しを作る方法」でも紹介していますが、今回はもう少し分かりやすく図解します。

基本の吹き出しの作り方

三角形の作り方

吹き出しの三角形はボーダーで作ることができます。これは、上下左右のボーダーが接するとき、角の部分が斜めになるのを利用しています。

たとえば、以下のようなCSSを書いたとき、

div {
  width: 0;
  height: 0;
  border-top: 50px solid cyan;  /*上のボーダーはシアン*/
  border-left: 50px solid magenta;  /*左のボーダーはマゼンタ*/
  border-right: 50px solid yellow;   /*右のボーダーはイエロー*/
  border-bottom: 50px solid black;  /*下のボーダーはブラック*/
}

ブラウザで表示すると下のようになります。

 

上下左右のボーダーのうち、1つに色をつけて、他を透明(transparent)にすれば三角形の出来上がりです。

div {
  width: 0;
  height: 0;
  border: 50px solid transparent;  /*上のボーダー以外は透明*/
  border-top: 50px solid cyan;  /*上のボーダーはシアン*/
}

 

これを利用して作った疑似要素の三角を、positionで要素の任意の位置に持っていきます。具体的には以下のようなコードになります。

吹き出しのコードの例

HTML

<p>sample</p>

CSS

p{
  position: relative;
  width: 200px;
  height: 50px;
  margin: 30px;
  font-size: 18px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background-color: #009D78;
  border-radius: 10px;
}
p::after{
  content: "";
  position: absolute;
  bottom: -12px;  /*マイナス値を指定して三角形を下にはみ出させる*/
  left: 50%;
  margin-left: -10px;  /*左右のボーダーの線幅ぶん右にずれるので調整*/
  border-style: solid;
  border-color: #009D78 transparent transparent transparent;  /*上のボーダー以外透明*/
  border-width: 15px 10px 0 10px;  /*下のボーダーは不要なので0*/
}

DEMO

基本の吹き出しデモファイル

次回記事では、ふち付きの吹き出しを作る方法を紹介します。

イラストレーターで手書き風の線を描く方法いろいろ3 ~線幅ツールとアピアランスを合わせて使う~

線幅ツールとアピアランスで手書き風の線を作る

完成

前々回の記事前回の記事と手書き風の線を描く方法を紹介してきました。この記事で最後です。今回は、少し手間がかかりますが、線幅ツールで一つ一つのパスに強弱をつけ、効果「ラフ」や「パスのオフセット」を使って手書き感を出す方法を紹介します。

線幅ツールで強弱をつける

元画像

元画像

線幅ツールで強弱をつけていきます。線幅ツールでは、普通にドラッグするとパスに対して均等に線幅が変わりますが、Altキーを押しながらドラッグするとパスの片側だけ幅を変えることができます。

通常のドラッグaltキー+ドラッグ

線幅ツールで強弱をつけた状態が下の画像です。

線幅ツールで強弱を付けた状態

線幅ツールで強弱を付けた状態

アピアランスを使って質感を表現する

いくつかアピアランスを使って質感を表現します。手順は以下です。

  1. 線をグループ化する
  2. 効果>パスファインダー>追加 ※パスファインダーパネルの機能とは別物
  3. 効果>パスの変形>ラフ
手順3の状態

手順3の状態

  1. 効果>パス>パスのオフセット「0.2mm(例)、ラウンド」
    ※オブジェクト>パス>パスのオフセットとは別物
  2. 効果>パス>パスのオフセット「-0.3mm(例)、ラウンド」
完成

完成

手順4、5のパスのオフセットでは、一度太くしてから元の太さよりも細くすることで、自然なかすれを表現しています。パスのオフセットを適用する前に、「効果」のパスファインダーの「追加」を適用しておくのがポイントです。最後に、アピアランスパネルの様子を載せておきます。

アピアランスパネルの様子

 

イラストレーターで手書き風の線を描く方法いろいろ2 ~ブラシを使う~

ブラシを使って手書き風にする

前回の記事で、効果「ラフ」を使って手書き風の線を描く方法を紹介しました。今回はブラシを使う方法を紹介します。元々Illustratorに入っているブラシを適用するだけでも、だいぶ見た目を変えることができます。

元画像

元画像

たとえば、前回も使ったこの画像が、元々入っているブラシを適用するだけで下の画像のようになります。

ブラシ「木炭(鉛筆)」を適用

ブラシライブラリ「アート_木炭・鉛筆」内の「木炭(鉛筆)」を適用

ブラシ「鉛筆(太)」を適用

ブラシライブラリ「アート_木炭・鉛筆」内の「鉛筆(太)」を適用

ブラシの線幅を変更する方法

ブラシの線幅は、「線」パネルの「線幅」で変更する以外にも、ブラシパネルでブラシをダブルクリックしてブラシオプションを開いたり、ブラシパネル下部の「選択中のオブジェクトのオプション」ボタン(「新規ブラシ」ボタンのとなり)で変更することができます。

オリジナルのブラシを作って強弱をつける

強弱ブラシ使用例1

オリジナルのブラシを作って線に強弱をつけることもできます。ブラシは「アートブラシ」で登録しますが、この種類のブラシはパスの長さに合わせて引き伸ばされてしまうので、いろいろな長さの線に対応できるよう、複数の長さのブラシを用意しておくのがポイントです。

簡単な強弱つきブラシの作り方

強弱のついたブラシを簡単に作るには「線幅ツール」を使います(CS5以降)。まず、ペンツールなどで直線を描き、それを「線幅ツール」で強弱のついた線に変形します。

線幅ツール

強弱をつけた線は、そのまま「ブラシ」パネルにドラッグして「アートブラシ」として登録できます。このとき、線に任意の色を付けたいなら、アートブラシオプションの「彩色」を「淡彩」などに設定しておきます。

アートブラシの設定

前回紹介した効果「ラフ」を適用して質感を出したブラシにすることもできます。ブラシのもとになる線に「ラフ」を適用して、そのままブラシに登録すればOKです。の画像が「ラフ」を組み合わせたブラシを使ったイラストです。

強弱ブラシ使用例2

 

ブラシで自然な強弱をつけるポイント

パスの様子

ブラシで強弱をつける際は、きりのいい部分でパスを切ると自然な仕上がりになります。また、塗りと線は別のオブジェクトで作り、塗りの上に線を重ねるように作るのが、Illustratorでイラストを作成する際の一般的な方法です。

イラストレーターで手書き風の線を描く方法いろいろ1 ~「ラフ」を使う~

Illustratorはベクターデータで画像作成ができるため、どんな大きさで使うかわからないイラストなどを作成するのに向いていますが、反面、手書き風のぬくもりのあるイラストを作りづらいです。

手書き感を重視するならPhotoshopの方が作りやすいですが、Illustratorでも手書き風の線を描く方法はありますので、今回から数回に分け、Illustratorで手書き風の線を描く方法を紹介していきます。

効果「ラフ」を使って手書き風にする

手書き風の線を作る方法の中でも早くて簡単なのが、効果「ラフ」を使う方法です。例えば以下のようなイラストに適用してみます。効果>パスの変形>ラフ で適用できます。

元画像

「ラフ」にはいくつかの設定がありますが、その値が変わると色々な見た目になります。

たとえば、「サイズ」と「詳細」を小さく設定すると少し震えたような線になり、「サイズ」は小さく「詳細」を大きく設定すると、クレヨンで描いたようなガサガサした線になります。下の画像で比較してみてください。

「サイズ」も「詳細」も小さくした例

「サイズ」は小さく「詳細」は大きく設定した例

なお、サイズの設定をするときは、「パーセント」より「入力値」にしておいた方がいいです。「パーセント」にしていると、パスの長さによって効果のかかり方が変わってしまうからです。

サイズ「パーセント」サイズ「入力値」

また、手書き風にするときは「ポイント」を「丸く」に設定しておきます。「ギザギザ」に設定すると、直線で描いたような見た目になります。

「丸く」に設定「ギザギザ」に設定

以上、効果「ラフ」を使って手書き風の線にする方法でした。次回記事でほかの方法も紹介していきたいと思います。

模擬面接を行いました

本日、グラフィックデザイン午後科で、模擬面接を行いました。

面接が得意という方はなかなか居ないと思います。誰でも緊張してしまうものです。本番で極度に緊張してしまい、うまく受け答えができなかった経験のある方も多いのではないでしょうか。

本番になって頭が真っ白になってしまわないように、想定される質問などは、どのように回答するか準備しておくことが重要です。また、可能なら模擬面接などを行って、実際に声に出して練習すると効果的です。模擬面接の面接官役を頼める人が身近にいない場合は、一人でも声に出して答える練習をすると良いと言われます。

できるだけ準備して、本番ではほどほどの緊張感で話せると良いですよね。

修了式

conglaturations!

本日、午前のWebクリエイター養成科が修了式を迎えました。

皆さん、長いようで短い6か月間だったと感じているのではと思います。訓練は今日で終了ですが、これから3か月の間に就職するという一番重要な目的が残っていますので、より一層意欲的に就職活動に取り組んでほしいと思います。

6か月間お疲れ様でした。