月別アーカイブ: 2016年10月

Illustrator小技 グラデーションメッシュを通常のパスにする方法

今回は、グラデーションメッシュを通常のパスにする方法を紹介します。下の参考サイトで紹介されていた方法です。「通常のパスにする」といっても、メッシュ自体が変化して通常のパスになるわけではありません。

参考サイト: [イラレのTips]グラデーションメッシュを元のパスに戻す方法 – Factory70 Blog

方法は、メッシュを選択し、「パスのオフセット」の値を「0」にして実行するだけなので、とても簡単です。「パスのオフセット」は、一回り大きな(もしくは小さな)パスを作成する時に使いますが、大きさを変えずに実行すれば、オブジェクトの形をとるのに使えるというわけです。

参考サイトでは、メッシュ作成に失敗した際にやり直す用途として紹介されていましたが、メッシュで作ったオブジェクトの輪郭に線をつけたい時などにも役立つと思います。

メッシュと同じ形のパスを作る

メッシュを通常のパスにするというより、メッシュと同じ形のパスを作るというイメージです。実際に下の画像のメッシュで試してみました。

バナナのメッシュ

メッシュを選択して、オブジェクト>パス>パスのオフセット をクリックし、「オフセット」に「0」を入力してOKを押します。

パスのオフセット

これでできたのが下のパスです。

メッシュをオフセットしてできたパス

メッシュをもとにしているので余分なアンカーがありますが、これはパスの「単純化」で軽減できます。「単純化」は、オブジェクト>パス>単純化 から実行します。少しパスの形がズレることがありますが、見た目にはそれほど影響無いと思います。

パスの単純化

このパスの場合、「単純化」で28個あったアンカーが19個に減りました。

今回は、オフセットで作ったパスでメッシュのイラストの周りに枠を付け、シール風に仕上げました。

輪郭をつけた完成品

 

 

PhotoshopCC小技 画像に使われている文字に似たフォントを探す機能

PhotoshopCC小技 画像に使われている文字に似たフォントを探す機能

フォントは、デザインのイメージを大きく左右するので、結構悩みますよね。既存のデザインを参考にすることもあるのではないでしょうか。しかし、参考にしたデザインに使われているのと同じ(もしくは似た)フォントを使いたいと思っても、フォント名が分からない場合、パソコンにインストールされているフォントをひとつひとつ調べていくのは大変です。そんな時に、PhotoshopCCのマッチフォントという機能を使えば、画像に使われている文字に似たフォントを、インストール済みのフォントから探してくれます。ただ、あまり似ていないフォントも出てきてしまうことが多いようなので、補助的に使うのがいいかもしれません。

マッチフォントの使い方

  1. 文字の入った画像を用意する(ビットマップ画像でOK)
  2. 文字の部分を選択する
  3. 書式>マッチフォント を選択

マッチフォントを実行すると、インストール済みのフォントの中から、画像と同じ、もしくは似たフォントを一覧で表示してくれます。また、Adobeのフォントサービス「Typekit」のフォントも検索され、雲のマークをクリックすることでその場でインストールが可能です(訓練校のパソコンではインストールできません! ご了承ください)。

参考サイト

Acrobat Pro DC で複数のファイルを1つのPDFに結合する方法

今回は、Acrobat Pro DC を使って複数のファイルを1つのPDFファイルにする方法を紹介します。結合するファイルの種類は、PDFだけでなく画像ファイルやテキストファイルでも大丈夫です。

Acrobat Pro DC でファイルを結合

  1. Acrobatを開いて出てきた画面で ツール>ファイルを結合 を選択
    ファイル結合ツール
  2. 結合したいファイルを画面上にドラッグ&ドロップする
  3. ドラッグでファイルの順番を整えたら「結合」ボタンで実行
    ファイル結合の実行

このように、簡単にファイルを結合することができます。WindowsでAcrobat Proがインストールされていない場合、リーダーでは結合できないので、下記のようなサイトを使って結合する方法もあります。Macの場合は、標準アプリの「プレビュー」で結合することが可能です。

PDFを結合できるWEBサービス

なお、この機能はCCより前のバージョンでは少し操作が異なります。以前のバージョンでファイル結合をする場合、ファイル>作成>ファイルを単一のPDFに結合 を実行してください。

WEBサイトの企画書に入れる内容について

午後コースの卒業制作が来週から始まります。これまでの課題とは違い、企画書から提出していただきますので、企画書に入れてほしい内容について書いておきます。(課題指示書にも書いた内容です)

企画書に入れる内容

1. コンセプト(お店や企業のコンセプトではなくサイトのコンセプト)

参考 WEB サイトコンセプトの制作に役立つ 5 つの事例-WordPress ラボ

http://worpre-lab.com/webmarketing/concept_making/

2. ターゲット(デザインを考えるうえで重要なのでどんな人がターゲットか細かく考える。)

△20 代~ 30 代の女性
○20 代~ 30 代のEC サイトをあまり利用したことが無い女性

3. サイト制作の目的(顧客獲得、ブランド周知など)

4. 現行サイトの問題点(※リニューアルの場合)

5. コンセプトや目的を達成するための方策(出来るだけ具体的に)

△検索機能を強化して、商品を探しやすくする。
○商品検索にカテゴリによる絞り込み機能をつけ、商品を探しやすくする。

6. 問題点の解決策(※リニューアルの場合。出来るだけ具体的に)

悪い例

グローバルナビゲーションを分かりやすくする。

良い例

グローバルナビゲーションを分かりやすくするために
  1.  項目数が8 個と多いため、重要度の低い項目をフッターナビゲーションへ移動し、項目数を5 個に減らす。
  2.  ボタンにマウスカーソルを乗せると英語表記から日本語表記に変わるようにする。

7. サイトマップ(サイト全体のサイトマップを作る)

課題期間中に制作するページとしないページが分かるようにする(色分けするなど)

8. ワイヤーフレーム

9. 制作スケジュール(表形式)

DreamweaverCC小技 サイト内で使ったカラーコードをコピー

Dreamweaverのアセットパネルの「カラー」の項目には、サイトで使用しているカラーが表示され、ドラッグ&ドロップで再使用できるようになっています。DreamweaverCCでは、この機能に加えて、アセットパネルでカラーコードをコピーし、CSSデザイナーパネルでペーストできるようになっています。

アセットパネルでカラーコードをコピーするには、カラーを選択して右クリックし、「カラーの値をコピー」をクリックします。CSSデザイナーパネルにペーストするときは「Ctrl + V」です。

アセットパネルでカラーをコピー

 

一度使った色を再度使いたいとき、色を見ながらカラーコードを簡単にコピーできて便利なので、ぜひ試してみてください。

IllustratorCC小技 エリア内文字への切り替え

今回は、IllustratorCCで追加された機能、ポイント文字とエリア内文字の切り替えを紹介します。かなり細かい機能ですが、痒い所に手が届くいい機能だと思います。

エリア内文字への切り替え

IllustratorCCで、普通にクリックで入力した文字(ポイント文字)とエリア内文字を切り替えるには、文字を選択ツールで選択すると右側に出てくるバー(の先の小さな円)をダブルクリックします。

エリア内文字/ポイント文字の切り替え

メニューから行う場合は、「書式」>「エリア内文字に切り替え」もしくは「書式」>「ポイント文字に切り替え」で同じことができます。

注意

エリア内文字からポイント文字に変換するとき、エリア内からはみ出して表示されない文字があると、ポイント文字にした際にその文字が消えてしまうので注意してください。

オーバーフローした文字の場合

こういう時は、エリアを広げてからポイント文字へ変換してください。IllustratorCCでは、隠れた文字が表示される大きさまでエリアを広げてくれる機能も付いています。エリア内文字を選択ツールで選択した状態で、下に表示されるバー(の先の小さな四角)をダブルクリックすれば、全ての文字が表示できる大きさまでエリアが拡張されます。

area-point03

エリアを拡張された文字

PHP breakでループ処理を止める方法2

PHP breakでループ処理を止める方法2

前回の記事で、break の基本的な使い方を紹介しました。今回は、もう一つ break を使ってループを抜ける例を紹介します。

ランキングなど配列の一部だけ出力したいときの例

下の例は、アプリのダウンロード数ランキングを3位まで表にする例です。$lanking という配列の、キーにアプリ名、値にダウンロード数を入れています。

<h2>アプリダウンロード数ランキング</h2>
<table>
<thead>
<tr>
  <th>順位</th>
  <th>アプリ名</th>
  <th>ダウンロード数</th>
</tr>
</thead>
<tbody>
<?php
  $lanking = array(
    'appA' => 300000,
    'appB' => 250000,
    'appC' => 200000,
    'appD' => 150000,
    'appE' => 100000,
    'appF' => 50000,
  );
  $lank = 0;
  foreach($lanking as $app => $dl){
    $lank ++; //$lankの値を+1する
    if($lank == 4){
      break;
    }
    echo <<< HTML
  <tr>
    <td>{$lank}</td>
    <td>{$app}</td>
    <td>{$dl}</td>
  </tr>
HTML;
  }
?>
</tbody>
</table>

今回の配列は連想配列(キーが文字列の配列)なので、何番目の要素か識別するのにキーが使えません。そのため、$lank という変数を作って順位を表しています。$lankは初期値が0で、配列の要素をひとつ処理する度に1づつ増えていきます。 1位から3位まで表示したいので、4位は処理しないように、$lank が 4 のときにループを抜けるように設定しています。

ブラウザで出力すると下の画像のようになります(cssは別指定です)。

実行結果2

参考

PHP breakでループ処理を止める方法1

breakでループ処理を止める方法

先日の記事で、foreach を使って配列を処理する方法を紹介しました。foreach では、配列の要素をすべて処理し終わったら自動的にループ処理から抜けるようになっています。しかし、配列のいくつかの要素のみ処理したい場合や、自動でループを抜けない文を使ったりする場合、処理を終了させるために break という文を使用することがあります。

breakの使い方

break は if の条件分岐と組み合わせて使われることが多いです。例えば、配列の要素を[0]から[4]まで処理したらループを抜けたいときは、下のように書きます。

例:$sample[0]から$sample[4]まで処理する

<?php
  $sample = array('A','B','C','D','E','F','G','H','I');
  foreach($sample as $key => $val){
    if($key == 5){
      break;  //キーが5ならループを抜ける
    }
    echo $val;
  }
?>

実行すると下の画像のようになります。

実行結果1

次回の記事で、もう一つ例を紹介します。

参考

PHP 配列の並べ替えをする関数

PHP 配列の並べ替えをする関数

PHPで配列の要素を並び替える方法を紹介します。アルファベット順に並び替えたり、数値の大きさで並び替えができるようになっています。配列の並べ替えには関数を使いますが、キーを並び替えるか、値を並び替えるか、昇順か降順かなどでいくつもの関数が用意されています。この記事では、そのうちのいくつかを紹介します。

配列の並べ替えをする関数
関数 処理内容 キーと値の関係
asort() 値を昇順に並べ替える 維持する
arsort() 値を降順に並べ替える 維持する
ksort() キーを昇順に並べ替える 維持する
krsort() キーを降順に並べ替える 維持する
sort() 値を昇順に並べ替える 維持しない
rsort() 値を降順に並べ替える 維持しない
shuffle() 値をランダムに並べ替える 維持しない

記述例

下は、配列$lamkingの値を降順に並べ替える例です。

<?php
  $lanking = array(100,200,300);
  rsort($lanking);
  print_r($lanking);
?>

出力すると下の画像のようになります。

出力結果

array文では配列の順番が100→200→300だったのが、rsort() によって300→200→100に並べ替えられていることがわかります。

WEBクリエイター養成(午前)科修了式

CONGRATULATIONS!

WEBクリエイター養成(午前)科の修了式がありました。

6か月の訓練、長いようで短く感じられたと思います。受講生の皆さん、お疲れ様でした。開講時と比べてみて、かなりスキルアップできたのではないでしょうか。

1からWEBサイトを制作する技術は身についたと思いますので、あとは皆さんがそれぞれ進みたいと思っている道に必要な知識をさらに学んでいってほしいと思います。WEB業界は常に変化し続けています。どんどん新しい技術やデザインが出てくるので、学び続けることが重要です。

修了式から3か月間、就職活動に専念して、訓練で身に着けたスキルを活かせるお仕事を見つけてほしいと思います。