2014年11月28日(金)
Illustratorで異体字を使いたい
漢字には同じ意味で形の違う文字(異体字、異字体)が存在します。
例えば、「高」という字には「髙(はしごだか)」と呼ばれる異体字が存在します。
「髙(はしごだか)」なら通常の変換でも出せるのですが、
通常の変換では出ない漢字も少なくありません。
そんな時、字形パレットから選ぶと簡単に異体字を入力することができます。
まず、「書式」の「字形」で字形パレットを開きます。

変えたい文字を選択すると、字形パレットでその文字が選ばれます。
選ばれた文字に小さい▶がついていれば、異体字が存在します。

高をしばらくクリックしていると、異体字の一覧が表示されます。

あとは変えたい異体字を選択すれば、異体字が入力できます。

また、字形パレットで記号なども入力することができます。

読み方の分かりにくい記号などを入力する時に便利です。
2014年11月27日(木)
Illustratorで複数のオブジェクトの色替えを同時に行う方法
Illustratorで作成した、こちらの色付き文字

色相を変えずに色替えしたい、すべての色を同時に色替えしたいと思うことがあると思います。
今回は、その動作を簡単に行える方法をお伝えします。
1,まず、色を変えたいオブジェクトを全て選択し、
「編集」→「カラーを編集」→「オブジェクトを再配色」をクリックします。

もしくは、メニューバーの下にある虹色の円をクリックします。

2,出てきたポップアップの「編集」をクリックします。

3,右下の離れた鎖のようなアイコンをクリックしすると、つながったようなアイコンに変わるので、
その状態のまま円をドラッグしたり下のスライダーで色を変えると、色が変わります。

目視しながら変更できるので、「ここだけ別の色にしたいな・・・」という場合は、
鎖を最初の状態にし、変更したい色の円をクリックすると色を変えることが出来ます。
4,変更して、「OK」をクリックすると、色が変わりました!

この方法は、グラデーションを作成した時に色替えしたい時にとても便利な方法なので、
是非ご利用してみてください!!
2014年11月26日(水)
デザインが苦手でもCSSなら3ステップでボタンが作れる
ホームページでよくある「くわしくはこちら」などのボタンを用意する時、
PhotoshopやIllustratorなど画像編集ソフトを使って作成すると思います。

しかし画像でボタンを作成した場合、今後ボタンの色を緑から紫に変えたい、
大きさも変えたいし中の文字も変えたいとなると、何か変更する度に
画像編集ソフトを立ち上げて修正して、画像を保存しなおす必要があります。
そんな煩わしさを解消できる上に、デザイン素人でもCSSを使って
簡単にボタンの作成、変更ができる方法がありますのでご紹介します。
※CSSだけでここまで出来る!イラレ顔負けの機能たちを
先にご覧になりますとこれからの手順がより分かりやすいと思います
※今回はGoogleChromeで見た時に表示されるCSSで説明しています
まずはボタンにしたい土台を用意

まずはhtmlでボタンにしたいリンクタグを設置します。
<div class="dl"><a href="dl.html">無料ダウンロード</a></div>
次に、リンクタグがボタンとして押せるようにCSSで四角形にしていきます。
div .dl {
width: 250px;
background: #00cc33;
}
div .dl a {
display: block;
font-size: 20px;
font-weight: bold;
padding: 20px 40px;
color: #fff;
text-align: center;
text-decoration: none;
}
でもこれだけだと、まだボタンだと分かりにくいですね。
ボタンの角を丸くする

次にボタンらしさを出すために、端っこの角を丸くします。
CSSではdiv.dlを以下のようにしました。少し、ボタンっぽくなってきました。
div .dl {
width: 250px;
background: #00cc33;
-webkit-border-radius:5px; ←追加したCSS
}
ボタンの色をグラデーションにする
更に「押せる」感じを出すために、ボタンの色をグラデーションにします。

CSSではdiv.dlを以下のようにしました。これだけでも、かなりボタンっぽくなりました!
div .dl {
width: 250px;
background:-webkit-linear-gradient(#C5E021, #00CC33); ←変更したCSS
-webkit-border-radius:5px;
}
ボタンに影を付ける
最後にボタンに影を付けてより立体的に仕上げます。

CSSではdiv.dlを以下のようにしました。
div .dl {
width: 250px;
background:-webkit-linear-gradient(#C5E021, #00CC33);
-webkit-border-radius:5px;
-webkit-box-shadow:#999 0 4px 5px; ←追加したCSS
}
ボタン完成まで3ステップ!
角をもっと丸くしたいなど修正したい時もらくらくです。
実はFireFoxのダウンロードページでも同じCSSの技法が使われています。

Firefoxダウンロードページ
https://www.mozilla.org/ja/firefox/new/
ホームページに沢山ボタンを設置したい、でもいちいち画像で作るのは面倒!
などなどお悩みのユーザー様、是非お試しください。
2014年11月21日(金)
Photoshopで画像を徐々に透過する方法
画像をグラデーションのようななめらかな透過にする方法です。
画像が背景の場合はレイヤー上で右クリックして「背景からレイヤーへ」を選択し、変換してください。
レイヤーウィンドウ下のレイヤーマスクを追加をクリックします。
ツールからグラデーションツールを選択します。
あとは透過したい方向にカーソルをドラッグするだけです!
透過できました!
透過したことによって合成もしやすくなりました。
また、レイヤーも背景から変換しているので作業がしやすくなっています。
2014年11月19日(水)
EC CUBEの管理画面でPCレイアウトがスマホ版になる
弊社ではEC CUBEにてショッピングサイトを複数構築していますが、
あるECの管理画面でだけ、バージョンアップ後、
PCレイアウトがカラムなしになる現象が発生・・・・

最初はスマホ版のレイアウトを選択したのかと思ったけれど、
選択されているのはしっかりとPCレイアウト。
device_type_idもきちんと10になっていて、PCのものになっている。
もしかしたら管理画面上の表示がこうなってるだけで、
実際登録すればきちんと表示されるのかも、と思ってテストページを作成して
登録にチャレンジするも、見事に崩れてしまう。。
何かデータベースの移動の時にうまく
引き継げていないものがあるのか・・・・・
データベースのmtb_device_typeやdtb_blocpositionのあたりが
あやしいのではないかと探ってみるけれど、正常なデータベースと見比べて全く異常なし!
そこで、全くいじっていない同じバージョンのEC CUBE2.13.1ファイル一式を
サーバー上にアップして同じデータベースを参照して検証!
すると、レイアウトが正常に表示される!!
ファイルの問題なら結構大丈夫かもしれないと、
明るい気持ちになりながら管理画面のデザイン関連のこのあたりのファイルを
デフォルトのもので上書き。
/data/class/pages/admin/design/LC_Page_Admin_Design.php
/data/Smarty/templates/admin/design/index.tpl
いろんな記事を調べながら、それらしいものを試すもののうまくいかない。
ふと、EC CUBEって結構管理画面上でちょこちょこ設定ができるよなあと思い、
マスターデータ管理とか、パラメーター設定のあたりを確認。
す、すると!!!!ありました!!!!
絶対100%問題と思われるものが!!
DEVICE_TYPE_PC 端末種別: PCなるものにおいて 2 という数字が!!

今度こそ絶対解決と思い、自信をもって10に変更してみたところ、
無事に問題が解決!!!!
みんながカタカタと真面目に仕事をしているので、
さけびたい気持ちをぐっとこらえて、こっそりガッツポーズ。
解決できると本当にうれしい!けど、一体全体なぜこんなことに・・・・
バージョンアップは本当に慎重にしないと大変です。
2014年11月19日(水)
スマートフォン片手に紅葉狩り
11月中旬、大分は紅葉真っ盛りということで、週末に紅葉狩りに行ってきました!
デジカメを持って行こうかと迷ったのですが、
スマホのカメラの性能に期待したのと、紅葉にそこまで
熱い期待を寄せていなかったのでスマホだけを持って出かけました。
行ったのは、大分の岡城阯というところで、行ってびっくり!
とてつもなく広く、城跡と紅葉がマッチしてキレイでした。
そして撮った写真も、キレイ!!最近のスマホすごい!
こちらの2枚は色の調整、一切行っていません。


しかし中には、すっかり色あせてしまったものもあり・・・・

こういった写真を鮮やかに蘇らせる一番簡単な方法が、
Photoshopの「イメージ」>「色調補正」で、「彩度」を上げる方法です。
彩度を上げて、明度とコントラストを少々上げると

鮮やかになります!
もちろんやりすぎたら不自然になりますが、所要時間30秒ほどです。
ちなみにこの写真も少々やりすぎました。
でもちょちょっといじってこんな鮮やかになるなら、この手間を惜しむのは少々もったいないと思います!
せっかく撮った写真を、脳内の思い出そのままに生き返らせれたらいいですね。
2014年11月17日(月)
画像の一部分のみ暗くする方法
撮った写真を見たとき、
例えばペットの写真で背景が明るすぎて顔が暗すぎるですとか
室内で撮った写真で窓の外の光が強すぎるという場合があります。
そういった写真全体ではなく一部分のみ明るさを変えたいときの
調整方法の一つを紹介します。

こちらの写真の運転席の窓をもう少し暗くして落ち着かせたいと思います。

まずレイヤーパネルで新規レイヤーを追加し、
モードを「通常」から「オーバーレイ」に変更します。

ツールパネルよりブラシツールを選択し、描画色を黒にします。
そしてブラシのサイズを調整しながら、暗くしたい窓の部分を塗っていきます。
はみ出した部分は消しゴムツールで調整します。

塗り終わったらレイヤーパネルの不透明度をちょうどいいバランスに変えます。

いかがでしょうか。光の反射が抑えられたようになりました。
今回は暗くしましたが、逆に明るくしたい場合には「描画色を白」にするだけです。
この方法も簡単にできますので利用してみてください。
2014年11月14日(金)
photoshopで画像を水平にする
建築物などで傾いているものがあるときに便利な修正方法です。
水平にしたい画像を準備します。
赤線がまっすぐ引いた線です。だいぶ傾いています。
ツール一覧のものさしツールを使用します!
ものさしツールを使用して直線を引きます。
(わかりやすくするために画像を薄くしています)
イメージ>画像の回転>角度入力から角度を入力します。
画像の傾きが修正されました!
傾きを修正したぶん画像のまわりに余フチができましたので必要なサイズにトリミングしてください。
ものさしツール以外でもガイドラインを使用することもできます。
画像の傾きを修正するだけで画像の雰囲気も変わる事が多いですので、
是非活用ください!
2014年11月11日(火)
CSSだけでここまで出来る!イラレ顔負けの機能たち
2年ほど前から CSSが2から3が登場してからというもの
えっ!こんなことまで出来ちゃうの!?という驚きの機能が登場しました。
ただ、出来たばかりというのもあってインターネットエクスプローラーで
表示ができないなどの問題がありましたが、近年マイクロソフトさんもやっと対応してくれて
取り入れる作り手さんもだんだん増えてきました。
今日はそのグラフィックソフト要らずの少しのコードで劇的変化する一例をご紹介致します。
影(ドロップシャドウ)をつける

box-shadow: 5px 5px 5px #000; を指定
box-shadow: 0px 0px 5px #000 inset; insetを入れることで内側もできます。
グラデーションを入れる

薄いグレーから濃いグレーにグラデーションを掛けました。
こんな風にcssだけで手の込んだ見出しなどを簡単に作ることができます!
画像ではないので、更新の時もテキストを変えるだけでラクラク変更が可能です!
一度コツを掴むのに少し時間がかかりますが、これからのHTMLにおいてマスターしておいて損はないので
是非是非チャレンジしてみてくださいませ!
2014年11月10日(月)
画像リンクが切れている時の確認方法
他の人からIllustratorのデータを受け取りファイルを開く時に、
次のような画面が出ることがあります。
この場合、ファイルを移動したために、一時的に画像リンクが切れていて、
使用した画像が入っているォルダからリンクを繋ぎ直すことができれば問題ありません。
しかし次のような表示が出てしまうと...
この場合は画像自体が存在しない場合があります。
このままではファイルが開けないので、とりあえず切れているリンクを「無視」して、
ファイルを開いてしまいます。
画像が数枚程度ならばどの画像リンクが切れているかすぐ見つけることが出来ますが、
数十枚ともなると探すだけでなかなか一苦労です。
そんな時は、メニューの「ウィンドウ」から「リンク」ウィンドウを表示させます。
そして、リンクウィンドウの右上のメニューから「見つからないリンク」にチェックを入れます。
そうすると、画像リンクが切れているファイル名だけが表示されます。
そこから一つ選択して、下のバーの左から二番目にある
「リンクへ移動」をクリックすると、どの画像リンクが切れているのか一目瞭然です!
これで、もしもアートボード外にある不要な画像であれば消してしまうことも出来ますし、
必要な画像はファルダをもらった相手に問い合わせればいいとういうわけです。
ファイルをやりとりするときはお互いに手間がかからないよう、
不備がないようにしっかり準備と確認をしておきましょう。
2014年11月 7日(金)
同じ操作を他のデータでも実行したいならアクションが便利
同じ操作を他のデータでも実行したい場合、いちから同じように操作するのは大変です。
そこで便利なのが「アクション」機能。
「アクション」とは行った操作を記録して、同じ操作を自動で実行できる機能です。
使い方は簡単。
アクションパネルの「▼≡」マークから「新規アクション」を選択します。

任意の名前を入れて「記録」を押すと、
ここから行った操作のを全て記録していきます。(一部、記録されない操作があります)

アクションパネルの「■」を押すと、記録を中止します。

記録したアクションは「▶」を押すと再生されて、
記録した操作を繰り返し実行していきます。

ボタン一つで同じ作業を繰り返すことができました。

このように便利なアクションも何十点、何百点も行うのは面倒です。
こんな時には「自動処理」の「バッチ」を使うことをオススメします。
バッチ処理はフォルダ内の全てのデータや現在開いているデータにアクションを実行していくという処理です。
「ファイル」→「自動処理」→「バッチ」を選択します。

実行したいアクションを選択して、「ソース」で「フォルダー」か「開いたファイル」を選択します。
・「フォルダー」は任意のフォルダを選択してその中にあるデータにアクションを実行します。
フォルダは「選択」ボタンを押して選ぶことができます。
・「開いたファイル」は開いているデータ全てにアクションを実行します。
下にある4つのチェックは適宜使用してください。
・「開くコマンドを無視」はアクションに「開く」が記録されていても開くを実行しません。
・「サブフォルダをすべて含める」は選択したフォルダ内にあるフォルダも実行の対象になります。
・「開くダイアログを非表示」は「開く」のダイアログを表示しません。
・「カラープロファイル警告を非表示」はカラー環境が違うファイルを開いた時に警告を表示しません。

次に実行後の処理を選択します。
・「なし」はアクションに「保存」と「閉じる」コマンドが記録されている場合に選択します。
・「保存して閉じる」は上書き保存してファイルを閉じる処理をする場合に選択します。
・「フォルダー」は任意のフォルダに別名で保存する場合に選択します。

あとは「OK」を押すと、自動でアクションを実行していきます。
これで全く同じ操作を大量のデータに実行するのが楽になることうけあいです。
2014年11月 6日(木)
クイック選択ツールについて
2014年11月 4日(火)
フォルダを別ウィンドウで開く方法
この状況をなんと表現したらいいか迷うのですが、わかりやすく例をとってみますと
パソコン上で一つの【仕事】フォルダを開いており、
【仕事】>【案件】>【制作中】>【A企画様】>【デザイン】>【トップデザイン】
というフォルダを開いているとします。結構奥深くまで来ていますね。
そこで作業をしている時、
「【トップデザイン】のフォルダを開いたまま【A企画様】フォルダの中の【撮影写真】というフォルダも開きたい‥」
と、なることがあると思います。
そうなったら、普通にクリックしただけでは一つのウィンドウがどんどん進みながら開かれるので
今までまたデスクトップにわざわざ戻って【仕事】から開きなおしていました。

それがずっと地味に煩わしく思っていたのですが、何と簡単な方法で別ウィンドウで開く方法がありました。
フォルダを開く時に、一緒に「Ctrlキー」を押す!のみです!

同じフォルダ内でデータの保存場所の階層を変更したい場合や重複して開きたい時、
フォルダ内を見比べたい時など、使用頻度はそこまで多いわけではないですがとても便利です。
この機能は私がフォルダを触っている時、どうしても何とかならないかと思ってかなりのだめ元で
当時隣に居た川野に「何とかならないですかね~!?」と持ちかけたのがきっかけです。いやあ、助かりました。
「こんなことできるわけない・・・」の思い込みが思わぬ作業の遅れを招いていることがあります。
色々な知識を積極的に取り入れて効果的に作業を行いましょう!