ホームページ制作Fの業務を月ごとにご紹介

2015年5月29日(金)
Lightroomを使って大量の写真の容量を軽くする方法

最近のデジカメは画素数が上がっており、容量も大きくなってきています。
たくさんの写真を撮るとすぐに1GBを超えてしまうこともよくあると思います。
弊社では撮影用に一眼レフのデジカメを使っているため、写真のデータがかなり重くなってしまいます。
そこで、Lightroomというソフトを使って簡単に写真のサイズ調整を行い、容量を軽くする方法を紹介します。
ライトルームから読み込みを選ぶ
Lightroomを立ち上げたら、まずは軽くしたい写真を読み込まないといけません。
左下の「読み込み」を選択します。
写真の読み込み方法
次に、写真を入れているフォルダを選択し、右下の「読み込み」を選択します。
これで、Lightroomに写真を取り込むことが出来ました。
書き出し選択
全ての写真を選択し、左下の書き出しを選択します。
書き出しダイアログ
「書き出し場所」は別にフォルダを作って保存しておくと良いと思います。
「ファイル設定」のカラースペースは「sRGB」にしておりますが、
ホームページ用で使うためこの設定にしております。
任意で選択してください。
「画像のサイズ調整」の「幅と高さ」で任意の数字を入れてください。
あまり大きすぎても重くなってしまうので、1500pxぐらいがちょうど良いと思います。
後は、一番下の「書き出し」を選択すれば自動的に全ての写真のサイズを調整してくれます。
簡単にできるので、ぜひご活用ください!

2015年5月28日(木)
セレクトボックスの内容に合わせて入力項目の表示・非表示を切り替える方法

ほとんどのホームページにお問い合わせのページがあると思いますが、
多くのサイトで一般的に使われているのがメールフォームです。
ホームページの閲覧者が気軽に簡単に連絡できる重要な窓口であるため、
特に企業サイトでは必須なのではないでしょうか。

そこで、セレクトボックスでお客様が選択した内容に合わせて
入力欄の表示・非表示が切り替えられるとわかりやすくて便利ですよね。

例えば↓のように自動車ローンを選択すると、お申し込みローン情報の下に隠れていた「購入車輌情報」が出てくる方法です。

mail01.jpgmail02.jpg

やり方は様々ありますが、今回は極力簡単に実装できる方法をご紹介します。

<head>内に下記のコードを記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#tr_type select[name="希望ローン"]').change(function() {
    if ($('select[name="希望ローン"] option:selected').val() == '自動車ローン') $('#tr_writer').css('display','table-row');
    else $('#tr_writer').css('display','none');
  });
});
</script>
<script type="text/javascript"><!--
   function checkradio( disp ) {
      document.getElementById('tr_writer').style.display = disp;
   }
// --></script>

cord.jpg

↓↓

cord02.jpg

head内とテーブルのidが同じ部分を、わかりやすいように色で分けました。
色別ごとにhead内のid名を書き換えると、入力欄の表示・非表示の切り替えができます。

閲覧者にも伝わりやすく、便利だと思いますのでぜひお試しください!

2015年5月27日(水)
photoshopで作るシャボン玉

一度覚えてしまえば、簡単に作れるシャボン玉をご紹介します。
この方法を使えば、水晶やレンズなどの応用も容易です。

1.背景画像に映り込みを作っていきます。


まずは、映り込みの部分を正方形で切り出して別レイヤーにします。
選択ツールで選んで[Ctrl+C]→[Ctrl+V]で簡単にレイヤー作成。
052702.jpg
今度は作った新しいレイヤーを選択状態にして
そのまま[フィルター]→[変形]→[極座標]を選びます。
[直交座標を極座標に]を選択。
052703.jpg
そのままだと正方形のままで余分な部分があるので、
その正方形の1辺を直径とする円の新規パスを作成します。
そのままパスを選択してマスクをかけます。
052705.jpg

2.中央部分を透明にして透き通った水晶を作成


このままだと透明感が無いので、透明感を出すために中央を透明にします。
マスクにグラデーションをかけるのですが、グラデーションツールを使ってもいいですし
私の場合は微調整をしながらブラシツールのぼかしで中心を塗りました。
052706.jpg

3.境界線への映り込みと反射を加える


立体感のあるものは外側に光が当たって明るく見えるので
再度、別レイヤー、円形パスで選択範囲を黒塗りします
それに[光彩(内部)]をスクリーンで適用します。
052707.jpg
同じように、黒塗りしたものにグラデーションで光沢を与えてスクリーンで合成して光らせます。
052708.jpg
これだけで写真素材から簡単に水晶玉ができました。
052708-1.jpg

4.虹色を加える


シャボン玉のようにするには、ほんのりと虹色を加えます。
同じく円形の選択領域を作って、虹色のグラデーションで塗りつぶし[ソフトライト]で重ね合わせます。
052709.jpg
052710.jpg

5.仕上げに


シャボン玉や水晶玉を通して見える風景は少しゆがんで見えているので、
[フィルター]→[変形]→[球面]で少し映りこみを歪めます。
052706-2.jpg
052711.jpg
これで出来上がりです。

2015年5月26日(火)
Illustratorのドロップシャドウ小技集

Illustratorで写真に影をつけたいときには、ドロップシャドウを使いますよね。
今回は、写真に影をつけるドロップシャドウの小技を集めてみました。


1.写真の右下に影をつける

写真の右下に影をつける


2.写真の下に円弧のような影をつける

写真の下に円弧のような影をつける

これは、ドロップシャドウを使わずに、塗りを長方形に変換して、影をつくりました。
ワープや変形オプションなどを使うと、円弧のような影ができます。


3.写真の真ん中が浮いているように見せる

写真の左右に影をつける

これも、2と同じで塗りを長方形に変換して、ワープ:膨張を使い左右に影をつけました。
写真の真ん中が浮いているように見せることができます。


4.写真が立っているように見せる

写真が立っているように見せる

長方形の変形を少し工夫すれば、このように影をつけることもできます。
写真が立体的に見えますよね。


いかがでしたでしょうか。
ドロップシャドウはほとんど使っていないのですが、
塗りを変形させることで色々な影を作ることができます。


普通のドロップシャドウに飽きたら、
試してみてはいかがでしょうか。

2015年5月25日(月)
イラストレーターで暗い写真を簡単に明るくする方法

暗い写真を明るくするにはフォトショップやライトルームといったソフトを使いますが、
ちょっと全体的に明るくしたいだけなのに
わざわざそれらのソフトを立ち上げるのが面倒です。

暗い元画像

そこでイラストレーターだけで画像を簡単に明るくする方法をお教えします。

まず、明るくしたい写真を選択し、
「Ctrl+c」でコピーします。
次に「Ctrl+f」で前面にペーストします。

このペーストした写真を選択し、
アピアランスの不透明度を「通常」から「スクリーン」に変更します。

アピアランスのパネル

明るくなりすぎるようでしたら、不透明度を下げて調節してください。

明るくなった写真

画像を明るくする方法に、画像自体の不透明度を下げる方法がありますが、
こちらは全体が均等に薄くなってメリハリのない写真になるので
明るくするには不向きです。

不透明度を下げた写真

このようにイラストレーターだけでも簡単に写真をあかるくすることができます。

明るくする前と後の写真

2015年5月22日(金)
配置する画像を綺麗にする

イラレ画像

配置した画像をイラレ上で縮小すると上記のように画像が荒れてしまいます。 ですので一度Photoshopなどで配置したい画像サイズにトリミングや縮小をして配置します。

イラレサイズ
配置したいサイズをイラレ上で確認します。

フォトショ保存
Photoshopで配置サイズに変換します。

イラレ配置
変換したサイズを配置すると実寸での表示になるので表示が綺麗になります。

2015年5月21日(木)
ホームページ更新作業中に便利なショートカット

ホームページの更新作業を行うときに、
知っていると便利なブラウザのショートカットキーをご紹介します。
pc.jpg

「Ctrl」+「T」 新しいタブを開く(Internet Explorer7以降)
「Ctrl」+「U」 Webページのソースコードを表示
「Ctrl」+「W」 アクティブウインドウを閉じる
「F12」 要素検証
「Backspace」 前のページに戻る
「Shift」+「Backspace」 進む
「Alt」+「→」 進む
「Alt」+「←」 戻る
「Alt」+「←」 前のページに戻る
「Alt」+「→」 進む


マウス操作を減らすことで、作業効率がアップします!ぜひお試しください。

2015年5月20日(水)
画像だけのサイズ可変メニューを作る方法

このようなボタンの画像(テキストは使いません)を5つ並べて、ブラウザサイズに応じてボタン間の余白の比率を保ったまま拡大縮小させる場合、どうしたらよいでしょうか?

cord-setu01.jpg
こういうことができればよいわけです。

通常はこういうメニューを作る場合、テキストの入ったlistを横並びにする方法が一般的だと思われます。
しかし「テキストは使えない。画像だけ」だと、CSSだけではうまくいかないようです。
ボタンの画像をbackgroundで指定すると、どうしても表示や拡大縮小に支障がでてきます。
クリッカブルマップはサイズの可変に対応していません。

そこでこういう手を使いました。もっと美しい方法があるかもしれませんが、考え方とポイントを書きます。


  • 1.まずdivを作り、背景画像を表示する。cssではbackground-size:cover、width:100%、height:autoを指定し、ブラウザサイズにあわせて可変させる。

  • 2.ボタンを横に並べるdivを作る。cssでは上と下にpaddingを%で指定し、位置を合わせながら背景画像が全て表示されるようにする。

  • 3.img srcでボタン画像を配置。cssではfloat:leftで左から並べていき、幅と高さと余白は%で指定。


これで完成です。
イメージはこのような感じになります。
cord-setu02.png
欠点は、img srcで画像を表示するため、このコードを使うhtmlのフォルダ階層が複数あるとパスの指定も複数必要になることです。
サイトの構成やhtmlの数で、使いどころを判断すべきだと思います。

2015年5月19日(火)
Photoshopで暗い写真をサッと明るくする方法

Photoshopの基本中の基本の操作だとは思うのですが、暗い写真を一気に明るくする方法です。

暗い画像
とても暗いですね。せっかく幸せそうなのに残念です。
そんな時はPhotoshopで、まず【イメージ>色調補正>明るさ・コントラスト】と進み
明るさを調整します。
明るさを調整

見れるくらい明るくなりました。
次は同じ、色調補正から【シャドウ・ハイライト】を選択し、シャドウの値を上げます。
シャドウを調整

すると、暗かった部分が明るくなってきました。
そして、一回目の明るさ調整とシャドウの微調整を何度か繰り返し・・・、
(ここは一気にせず、少しずつ確認しながら両方の値を調整するのがいいと思います)

明るくなった画像
綺麗になりました!!所要時間は約1分です。笑
祝福のオーラに包まれた花嫁も際立ち天気もすごく良くなり、幸せな感じが倍増です!
せっかくの写真なので、何気ない写真でも一度Photoshopを通してみると
その時見たままの風景を再現することができますので、是非活用してください。

2015年5月18日(月)
Illustratorで「不明なエラー」、「メモリが足りません」の表示が出てしまったときの対処法

イラストレーターを使っているときに「メモリが足りません」や「不明なエラーが発生しました」など
表示がでて固まってしまったことはありませんか?今回はそんなときの対処法をご紹介します。
(win7のCS5を使用しております。)


☆「メモリが足りません」の表記になってしまっているとき


●1.システムの「プロパティー」を開きます
→2.「詳細」からパフォーマンス→「設定」をクリックします。
→3.仮想メモリを初期、最大どちらも「4092」にします。
→4.パソコンを再起動します
→5.イラストレーターを起動し、「編集」→「環境設定」→「プラグイン・仮想」をクリック
→6.ディスク1,2を設定します。
  (設定されていればもうしなくてもよろしいです!)


●1.スタートボタンのIllustratorのアイコンを右クリックします。
→2.「プロパティー」をひらきます。
→3.「互換性」パネルをクリックします。
→4.「互換モードでこのプログラムを実行する」にチェックをいれます。
  プログラムをWindows7に設定したら完了です。


☆「不明なエラーが発生しました」の表記がでているとき
長時間作業をしていたりすると起きやすいようです。表示された際は以下の対処法を試してみてください。


・別の形式で保存。(aiでなくepsなど)

・いらないスウォッチ、ブラシ、シンボルなどを消してワークススペースを整理。

・新規ファイルやアートワークを作り、全てコピペして保存。

・表示をアウトライン表示にする。

・埋め込み画像をリンク画像に変更。


もし保存が出来なくて困ってしまった場合は是非上の対処法を試してみてください。
そして保存中は出来るだけ他の作業をせず、そっと見守っているのが好ましいです・・・!


2015年5月15日(金)
ホームページの更新がうまく反映されない場合の対処方法

ホームページの更新を正しく行ったはずなのに、表示確認をすると
うまく反映されていない。という経験はないでしょうか?

考えられる原因

原因の一つとして、キャッシュから古い画像やスタイルシート情報が
表示に使用されている可能性が考えられます。

キャッシュとは、ホームページを閲覧した時の情報を
ブラウザに一時保存し、同じホームページを再度閲覧した時に
「変更部分の情報のみ」読み込みすることで表示を早くする機能のことです。

対処方法

キャッシュを削除を行います。
キャッシュの削除は、各ブラウザの設定やオプション画面から削除することができますが、
対処方法で最も簡単なのは「Ctrl+F5」を押す方法です。
「Ctrl+F5」を行うと「全ての情報」を再読込しますので最新状態が表示されます。
更新がうまくいかない場合、焦らず一度「Ctrl+F5」を試してみてください。
blog20150515.jpg

2015年5月14日(木)
ボタンに溝があるように見せる方法

1pxの線2本だけで、ボタンにアクセントをつける方法をご紹介します。

例えばこのように、文字が2段になったボタンがあります。
ちょっと物足りない気がしますね。
0514_1.png

そこで、このように真ん中に1pxの線を2本、
上下くっつけておきます。
色はとりあえずわかりやすいように白と黒にしています。
0514_2.png
そして、配置した2本の線を、
上の線は濃い目のグレーにし、
オブジェクトのモードを乗算にします。
下の線は薄いグレーにし、
オブジェクトのモードをスクリーン、
不透明度を80%にしました。
このモードと不透明度は下に引いたオブジェクトに合わせて
調整してみてください。
0514_3.png
どうでしょう?これだけで少し引き締まった感じがしませんか?

ちなみに、なぜ上が暗い色で下が明るい色かというと、
今回ボタン自体の影が、下についているため、
光源が上にあり、配置した2本の線を溝だと見立てると、
これが自然に見えるからです。
逆にすると...
0514_4.png
なんだか違和感がありませんか?

こういったことも少し意識してデザインをしてみると、
より立体感を持たせることができるかもしれません。
知識としても、活用してみて下さい。

2015年5月14日(木)
CSSで背景を複数設定する方法を使ったボタンのデザイン

CSS3を使うと角丸や影を反映できるだけでなく、
divなどのブロック要素に対して2つ以上背景画像を設定する事ができます。

今回は背景を複数設定する方法を使い、シンプルな
ボタンっぽいデザインが簡単にできる方法をご紹介します。

まずはボタンの土台を用意


html

<div class="botan">
<a href="next.html">かっこいいバイクが欲しい!<br>詳しくはこちら</a>
</div>


CSS

.botan a {
text-decoration:none;
display:block;
padding: 7px;
background: rgb(250,250,250);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#EAEAEA',GradientType=0 );

box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
border-radius: 6px;
font-weight:bold;
text-align:center;
}


とりあえずボタンらしきものが完成。
ボタンの土台を作成

背景を複数設定する方法でボタンの左右に画像を置く

更に背景画像を設定するCSSを追加します。

CSS

.botan a {
background-image:
url("img/common/img_right.png"),
url("img/common/img_left.png"),
linear-gradient(to bottom, rgba(250,250,250,1) 0%,rgba(234,234,234,1) 100%);

background-repeat:
no-repeat,
no-repeat,
repeat;

background-position:
97% center,
1% center;
}



今回は左右にイラストを置いてボタンっぽくしてみました。
ボタン作成
CSSの補足をしますと、「background-image」は背景画像の設定、
「background-repeat」は背景画像を繰り返し表示させるかの有無、
「background-position」で背景画像の位置を調整しています。

CSSでは通常下に書いていったものほど優先して適用されますが、
複数背景画像を設定する方法では先に記述したものが上に表示されます。

つまり今回のデザイン例では
① img_right.png(ヘルメットのイラスト)
② img_left.png(バイクのイラスト)
③ 背景色グラデーション
の順番で重なっているということになります。

ちなみに以下のように背景色の設定が一番上になると
画像が表示されなくなるので、順番には注意が必要です。
画像の順番を間違えた例

同じようなデザインでボタンを量産したい時は、
新しい画像を用意してhtmlとCSSをコピー&ペーストするだけなので、
IllustratorやPhotoshopで作成して書き出すよりもお手軽です!
ボタンを複製した

2015年5月13日(水)
Photoshopで水滴の作り方

デザインの仕事をしていると、アクセントとして様々なイメージ写真を使用しますが、
フリー素材を利用する時、少し物足りなさを感じることってあるんですよね。
そんな時にほんのちょっと手を加えるだけで、活きた写真にすることができます。
今回は、リアルな水滴の作り方をお教えします。

1.画像を用意します。


051301.jpg
分かり易いので、この葉っぱの上に作っていきます。

2.グラデーションの円を描く


Photoshopで使いたい画像を開き、新規レイヤー上で楕円選択ツールを使い円を描きます。
051301-2.jpg051301-3.jpg
グラデーションツールを選び、オプションバーで線形グラデーションを選択。
点線で選択された中をドラックして画像のような状態に塗ります。
051302-3.jpg
051302-1.jpg
終わったら「Ctrl」+「D」キーを押して、選択を解除します。

3.レイヤー効果を適用する


グラデーションを描いたレイヤーでレイヤースタイルのパレットを開きます。
051303-1.jpg
まず、「レイヤー効果」の「描画モード」で「オーバーレイ」を選択し
051303-3.jpg
次に、「ドロップシャドウ」、そして「シャドウ(内側)」と画像を参考に数値を変更してみてください。
051303-4.jpg051303-5.jpg
もちろん、数値はお持ちの画像によってしっくり来るよう微調整を!
もうこの段階で、すでに水滴になっています。
051302.jpg

4.光を加えて、よりリアルに!


ブラシツールで「ハード円ブラシ」を選択します。
051303-2.jpg
「直径を6px」にして、描画色を「白」に設定します。
あとは、左少し上辺りを数回クリック。
051303.jpg
これで完成です。

どうですか?
写真に活きたアクセントとなっていませんか?
今回は正円で作りましたが、楕円や個数を増やして、いろんなシーンで活用してください。
051304.jpg051305.jpg

2015年5月12日(火)
Illustratorで使える便利な時短テクニック

Illustratorでこれ使える!と思った便利な時短テクニックをご紹介します。
あなたは、複数の画像やテキストが重なっている場合、
一番下にあるものを選択する方法をご存知ですか?

いろいろ重なっている例

この場合一番下のビールの画像を選択したい!と思ったならどうしますか?
ここで使える時短テクニックの出番です。

それが、選択ツールの状態で【Ctrlキー】を押しながら、
選択したいビールの上をクリックしていくだけです。

Ctrlを押しながら文字の上をクリック1

Ctrlを押しながら文字の上をクリック2

Ctrlを押しながら文字の上をクリック3

Ctrlを押しながら文字の上をクリック4

あえて一番上の文字から選択していきましたが、
簡単に一番下のビールの画像を選択することができました。

Illustratorで使える便利な時短テクニックでした。

2015年5月11日(月)
photoshopで画像から切り抜いたような文字を作成する方法

photoshopを使って簡単にロゴを作成したいと思います。
今回は画像から切り抜いた文字の作成をご紹介します。

まずは、切り抜きたい画像を用意します。
ご自身で撮った写真など何でもでもかまいません。

画像から切り抜いたような文字の作成1.jpg

まずは文字を入力します。
そしてテキストレイヤーを右クリック→「作業用パスを作成」を選択します。

画像から切り抜いたような文字の作成2.jpg

次に「パス」のタブをクリック→「作業用パス」を右クリック→「選択範囲を作成」をクリックします。

画像から切り抜いたような文字の作成3.jpg

すると文字の部分のみ選択され、

画像から切り抜いたような文字の作成4.jpg

このような表示になると思います。
そのままレイヤータブに戻り、画像のレイヤーを選択後、「選択範囲を反転」を選択します。
そしてメニューの「編集」→「消去」を選ぶと出来上がりです!

画像から切り抜いたような文字の作成5.jpg

画像やフォントを変えたら色々な表情のロゴが出来ると思いますので
是非お試しください!

2015年5月 8日(金)
Photoshopを使って画像の解像度を下げる

写真のサイズをイラストレーター上で変更すると、
元サイズの解像度で表現しようとするので、写真が粗くなってしまいます。
また、大きいサイズのままだとデータの容量が大きくなってしまうので、
確定した写真は解像度を変える必要があります。
解像度変更前の写真
今回はこの写真の解像度を変更したいと思います。
リンク画像
リンクから詳細をみてみると、「変形」の部分が13%になっています。
イラストレーター上で写真をかなり小さくして配置しているためです。


そこで、フォトショップを使って簡単に画像の解像度を下げたいと思います。
まず、フォトショップに元写真のデータを読み込み、「イメージ」→「画像解像度」の順に選択します。
ショートカットキーは「ctrl+alt+I」です。
画像解像度
イラレ上のサイズ
先程のイラストレーター上の写真のサイズを、それぞれフォトショップの「幅」「高さ」に入力します。
画像解像度
これで、自動的に解像度を下げてくれます。
後は、フォトショップ上で保存をし、先程のイラストレーターを開くと
リンク
画像解像度後の写真
これで、「変形」が100%になりました。
見た目ではあまりわからないかもしれませんが、容量も下がっているのでデータが軽くなり便利です。
配置が決定した画像はどんどん解像度を合わせていきましょう!

2015年5月 6日(水)
不透明マスクについて

Adobe illustratorの便利な機能に「不透明マスク」があります。
グラデーションの明暗を透明度に変換してマスクをかけてくれます。
ここでは写真にマスクをかけてみます。
tmask01.jpg
表示したい部分を白、透明にしたい部分を黒にしたグラデーションを用意します。
マスク画像が上にして重ねて、「透明」ウィンドウの「不透明マスクを作成」を選択すると黒い部分が透明になります。
tmask02.png
背景を少し派手にしておきました。これはイメージに奥行きを持たせたり、鏡面反射の表現に使うなど、使いどころが非常に多いです。
tmask03.jpg

線形・円形グラデーションだけでなく、グラデーションメッシュにも使えます。このようなグラデーションメッシュでマスクをかけると...
tmask04.png
tmask05.jpg
このような結果になりました。使いどころを考える必要があります。

さらに、グレースケールのビットマップ画像でも使えます。このグレースケール画像だと...
tmask06.jpg
tmask07.jpg
このような結果になりました。使える素材を普段から用意しておくと便利に使えると思います。

2015年5月 5日(火)
イラストレーターでJPEG画像を綺麗に保存する設定

イラストレーターの「Web用およびデバイス用に保存」でJPEG画像を保存した際
文字がぼやけたり、グラデーション部分に線が入ってしまうことがあります。


イラストレーター上は、もっと綺麗だったはずなのに...
イラストレーター上は、こんな線は入っていないのに...


先輩に対処方法を習ったのでご紹介します!

「Web及びデバイス用に保存する(JPEG) 」画面右下の「画像サイズタブ」の設定を変更します。
000.jpg

設定は「なし」「アートに最適」「文字に最適」と3種類ありますがホームページで使用するバナーなどは文字を含んでいることが多いので「文字に最適」にすると一番綺麗に保存できます。


下記の図は、それぞれの設定で保存した画像のサンプルです。
20150505_2.jpg

「文字に最適」にしたものが一番綺麗で読みやすく、イラストレーターの表示に近い状態で保存できました。
イラストレーターを使用される方は、ぜひ一度確認してみて下さい!

2015年5月 4日(月)
携帯でPCサイトを表示した時にスマホサイトへ案内する方法

インターネットが普及した今、パソコン用とスマホ用の2種類で閲覧できるホームページが増えてきました。今回は携帯でPCサイトにアクセスした時に、スマホ用のページへ案内する方法をご紹介します。

PCサイト側のhtmlに以下のコードを追加します。

<script type="text/javascript">if(navigator.userAgent.indexOf('iPhone')>0||navigator.userAgent.indexOf('iPad')>0||navigator.userAgent.indexOf('iPod')>0||navigator.userAgent.indexOf('Android')>0){if(confirm('******へようこそ。このサイトにはスマートフォン用のサイトがあります。表示しますか?')){location.href='http://www.elashy-mise.jp/s/watch.html';}}</script>

<script>関連の辺りに記述。
sumaho.jpg
記述したらアップロードし、表示されるか実際にスマートフォンで見てみましょう。

securedownload.png

securedownload (1).png
PCサイトへアクセスしようとしたところ、このようにスマホ用サイトへの案内が表示され、OKを押すとスマホ用のページへ飛びます。スマホでPC用のホームページを見ると幅が違い、文字も小さく見にくいと思います。PC用とスマホ用の2種類のページがある場合は、ぜひこの方法をご活用ください!

2015年5月 3日(日)
Illustratorで線を使って文字を強調させる

Illustratorで文字や小見出しを強調させたいときに便利な、
線を使ったデザインを10個紹介していきます。

1.カリグラフィー(アート・インク)

線で強調するカリグラフィー

2.ドライブラシ(アート・ペイントブラシ)

線で強調するドライブラシ

3.パレットナイフ(アート・ペイントブラシ)

線で強調するパレットナイフ

4.木炭(アート・木炭・鉛筆)

線で強調する木炭

5.水彩画(アート・水彩)

線で強調する水彩画

6.ひし形(ボーダー幾何学模様)

線で強調するひし形

7.原始的(ボーダープリミティブ)

線で強調する原始的

8.マジョラム(ボーダーデコレーション)

線で強調するマジョラム

9.ジャバラ折り(ボーダーデコレーション)

線で強調するジャバラ折り

10.ミックスブーケ(ボーダーノベルティ)

線で強調するミックスブーケ


以上、Illustratorで線を使って文字を強調させる10選でした。
文章や雰囲気に応じて線をデザインしていければ、
うまく強調でき見やすくなるのではないでしょうか。

ブラシ定義を使えば簡単にデザインできるので試してみてください。


2015年5月 2日(土)
Photoshopの便利なHDR機能


photoshopの大変便利なHDR機能はご存知ですか?
たった数分の間でプロっぽい写真の加工が出来ちゃう便利な機能です!

今回はこちらの写真を加工してみたいと思います。
PhotoshopのHDR機能1.jpg

桜がきれいですが、なんとなくグレーがかっててぱっとしないですよね・・・
せっかくのきれいな青空ときれいな桜ですからもっと色をパキッとしたほうがメリハリがついて素敵だと思います。
ここで短時間で加工が出来ちゃうPhotshopのHDR機能の登場です。

<イメージ>→<色調補正>→<HDRトーン>の順番です
PhotoshopのHDR機能2.jpg

開くとこんな感じの表がでてきますのでプレビューを見ながら好きな色調にいじっていきましょう!

PhotoshopのHDR機能3.jpg


すると、、、こんな感じにできあがりました!!
パキッと色が整ってすごくきれいにみえますね!わずか所要時間2分でこんなに変わります!

PhotoshopのHDR機能4.jpg

最初のとくらべると一目瞭然ですね!

PhotoshopのHDR機能1.jpg


ちょっと色調があんまりよくないなって写真はHDR機能を使用してひと手間加えるだけですごく見栄えがよくなったりしますので
機会がありましたら是非ご利用ください!!

2015年5月 1日(金)
テクスチャを楽に使う方法

オブジェクトにテクスチャをつけるのに、よくフリー素材の画像を使用します。
物にもよるのですが、ループさせても切れ目が分からないように作れられた画像は、
スウォッチに入れておくといちいちクリッピングマスクをしなくても、
楽に使うことができます。
その方が、データも軽くて楽なので、やり方をご紹介します。

まずはテクスチャにしたい画像を適当に配置します。
今回は右のデニムっぽいテクスチャを付けたいと思います。
0501_1.jpg
配置したままだと、画像はリンク画像になっているので、
まず画像を選択して、メニューバーにある埋め込みボタンをクリックします。
すると、画像が埋め込まれます。
0501_2.jpg
埋め込み画像にすると、スウォッチに入れることができます。
なので、画像をスウォッチウィンドウにドラッグ&ドロップしましょう。
0501_3.jpg
↑スウォッチに入りました!
あとは、ほかの色パレットやテクスチャと同じように、オブジェクトを選択した状態でクリックすると、
そのオブジェクトにテクスチャを付けることができます。
クリッピングマスクみたいに幅や高さを気にせずに使えるので便利ですね!

アピアランスで塗りレイヤーを重ねて、レイヤーモードをうまく使えば
色々な表情を出すことができます。
0501_4.jpg
最後にスウォッチウィンドウの右上のメニューから、「スウォッチライブラリをIllustratorとして保存」
しておくと、スウォッチライブラリとして保存され、ほかのファイルを開いたときもいつでも呼び出すことができます。
(スウォッチはファイルごとにリセットされます)

designの表現の幅を広げるために、ぜひ試してみてください。

簡単無料お見積もり

お問合せ内容
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • 無理なく持続する経営がしたい
  • 現状を維持しながら息の長い経営をしたい
  • リスクを回避するための線引きをしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容