アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

古びた紙にかすれた風の文字のデザインを作ってみました。

はじめまして。

アシアルでデザイナーとして働いている花崎です。

最近いろんな方々に、
「黒いねー、焼いてるでしょ。」
「日サロ?」
「サーフィンでもやっているの?」
「ギャル?」
と言われます。

確かに夏だったので海で焼けました!といいたいところですが…

残念ながら違います。

地元の古紙回収と毎朝の出勤による日焼けです。
そんな私ですが、よろしくお願い致します。

9月はイベントが多く、キャンペーン用フライヤーなど目立つような派手な印刷物を作っておりました。

そこで今回は古紙を扱いなれたこの私が!古びた紙を利用した派手でポップなデザインをPhotoShopで作成してみようとおもいます。
こちらを作成します。使用したソフトは【Adobe Photoshop CS4】です。



さて、早速やってみましょー!!

古びた紙にかすれた風の文字のデザインを作ってみました。


1.背景の作成


新規作成で、[幅700px高さ1000px]のカンバスを開きます。
アプリケーションメニューから【レイヤー > 新規塗りつぶしレイヤー > べた塗り】で【#e4edec】の色で設定します。



2.かすれ感のある紙の素材を探す


素材集やスキャンなどでムラ感やかすれ感のある紙を探し保存します。
保存形式はjpegでもpngでもOKです。
名前は[キャンバス紙]にしてください。



3.キャンバス紙のあるレイヤーを選択し、そこで以下の順序でかすれた感じのレイヤーを作成


アプリケーションメニューから【ファイル > 配置】で、探してきた質感のあるキャンバス紙を選択し、配置します。



【レイヤー > ラスタライズ > スマートオブジェクト】でラスタライズ
【イメージ > 色調補正 > 階調の反転】



【イメージ > 色調補正 > 2階調化】でダイアログボックスがでてくるので、しきい値を設定※ここはかすれた感じを出すのに利用するので自分の好みの値にしてください。ここでは【65】に設定します。



レイヤーパネルにある、描画モードを【スクリーン】に変更



4.かすれた風の文字の作成


ツールパネルの【文字ツール】を選択して文字を描きます。
三色違う色で作成します。
フォントや色は好みで良いですが、今回のデータは以下の通り。
【フォント:A-OTF UD新ゴ Pro】
【太さ:DB】
【フォントサイズ:130pt】
【カラー:Aの文字:#ff1fa3 Bの文字:#eaff00 Cの文字:#00ccff】



5.A,B,Cの文字に透明感を出す


レイヤーパネルにある、描画モードを【焼きこみカラー】に変更します。



6.ムラ紙の加工


アプリケーションメニューから【ファイル > 配置】で、探してきた質感のあるムラ紙を選択して配置します。
レイヤーパネルにある、描画モードを【乗算】に変更し不透明度を【60%】にします。



7.文字の色を調整


Cのレイヤーを選択したまま【レイヤー > 新規調整レイヤー > 色相・彩度】を選択し【色相・彩度】レイヤーを作成します。
色調補正ダイアログボックスが出てくるので、色調をいじって好みの色相にしてください。
今回の場合は以下の通りです。
【色相:+3】
【彩度:+3】
【明度:+10】



8.星型のオブジェクトを作成


ツールパネルの長方形ツールから【多角形ツール】を選択
オプションバーから多角形オプションを開き、【星形】にチェックをいれ、角数を【5】に設定し、描画します。



9.星形オブジェクトをちりばめて派手する☆


レイヤーパネルにある描画モードを【オーバーレイ】に変更しムラ紙レイヤーの下に配置します。
ムラ紙レイヤーの上にも星型オブジェクトを置きます。
あとは星形オブジェクトの不透明をそれぞれ調節して画面全体の雰囲気を整えます。



10.名前を入れてこれで完成★





いかがだったでしょうか?

今回は ブログ用にRGBカラーで作成しましたが、DMにも活用できそうなデザインです。
その際には、初期設定でCMYKカラーに設定してから作成してください。

デザイナーとプログラマの連携にメーリングリストは使うな

愛車の税金と車検が同時に来て苦しむSaityです。
さて、今日はWebシステムのプロジェクトにおいて、デザイナーとプログラマの連携でやっちゃいけない事を挙げます。

【マネージャーがやっちゃダメな事】
・なんでもかんでもメーリングリストで連絡を取ろうとするな
特に、ファイルの作業衝突を防ぐ為に、「これからXXXファイルの作業をします」のような内容をメーリングリストで管理するのはもってのほか!身に覚えのあるプロジェクトは即、バージョン管理システムを導入しましょう。
また、システムの品質管理にはバグトラッキングシステム(BTS)を使うと良いでしょう。

・デザインと平行してプログラミングのスケジュールを組むな
テンプレートエンジンを使っても100%作業を分離する事は不可能です。
十分な工期が取れるならば、全体のデザインとHTMLコーディングの作成を先工程とし、そのHTMLスケルトンを使ってプログラマの仕様FIXを行うと効率が良いです。工期は延びますが、工数は確実に削減できます。

プログラマがやっちゃダメな事】
・プログラムソースにHTMLコードを入れるな

こんなコードは最悪です。


<?php
// ・・・

// テーブル生成
$member_table = '
<table>
 <tr>
  <th>ID</th>
  <th>NAME</th>
  <th>Email</th>
  <th>TEL</th>
  <th>SEX</th>
 </tr>
';

if (count($member_list)) {
  foreach ($member_list as $member) {
    if ($member['sex'] == 'm') {
      $sex = '男';
    } elseif ($member['sex'] == 'f') {
      $sex = '女';
    } else {
      $sex = '未選択';
    }
   $member_table .= "
      <tr>
        <td>".htmlspecialchars($member['id'],   ENT_QUOTES)."</td>
        <td>".htmlspecialchars($member['name'], ENT_QUOTES)."</td>
        <td>".htmlspecialchars($member['email'],ENT_QUOTES)."</td>
        <td>".htmlspecialchars($member['tel'],  ENT_QUOTES)."</td>
        <td>".htmlspecialchars($sex,            ENT_QUOTES)."</td>
      </tr>";
  }
} else {
  $member_table .= '<tr><td colspan="5">データはありません</td></tr>';
}
$member_table .= '</table>';

$smarty->assign("member_table",$member_table);

極端な例ですが、このようにスクリプトコードにHTMLが混入するスクリプトをよく見かけます。
一体何の為に、テンプレートエンジンを使っているのか解かりませんね。


【デザイナーがやっちゃダメな事】
・特にないけど、JavaScriptとかSmartyの簡単なコードが読めると、とても助かります。

先ほどのスクリプトをちゃんと書くなら、こんな感じになりますが、ニュアンスでどのような動きをするか理解できますか?
>>HTML








{foreach from=$member_list item=member}






{foreachelse}

{/foreach}
ID NAME Email TEL SEX
{$member.id|escape} {$member.name|escape} {$member.email|escape} {$member.tel|escape} {if $member.sex == 'm'}男
{elseif $member.sex == 'f'}女
{else}未選択
{/if}
データはありません

2.0

ちょっと使ってみたかっただけ・・・。

Web2.0 Logo Creator
もいっちょ。

Polaroid-o-nizer™
なるほど・・・。



最近思ったこと、デザイナーがプログラム覚えたら最強では?
PHPぐらいなら手つけやすいから、デザイナーさんも覚えられる気がする。

じゃ、逆にプログラマーがデザインできるようになったら・・・。
これは、デザインはセンスがものをいうから、そう、うまいこといかない気が・・・。
(俺とかひどいわorz)

ちなみに、アシアルでは現在Webデザイナーさん募集中です。PHPも覚えられますよ。
空いた時間にデザイン講座でもやってもらえるとうれしいです(><)