パソコンスクールISA船橋校 店長ブログ

こんにちは。

今日は【CSS】のお話です。

CSSレイアウトをしていると、marginを使って余白を作って
調整したりすることが出てきます。

CSSでレイアウトを始めたばかりの方たちが
最初にぶつかる壁が、おそらくこの現象ではないでしょうか？

この現象は主にfloatを使ってレイアウトをしているときに
おきる現象です。

widthの数値も全部計算してあっているはずなのに
なぜかブラウザで見ると、レイアウトが崩れてしまう・・・。

そんなことがIE6ではよくおきます。

実はfloatしている要素にmarginの指定をすると
IE6では、そのmarginが2倍にとられてしまうのです・・・。

なんともやっかいですね（＾－＾；）

つまり、たとえばCSS上では

margin-left:10px;

と設定していても、20px分とられてしまうので
仮にぴったりサイズ指定をしていたとしても
これによりレイアウトが崩れてしまう原因となることがあるわけですね。

ここまで現象の説明をしてきましたが、知りたいのはやっぱり解決方法です。

解決方法はとても簡単。

【解決方法】
floatしているブロックに対して

display: inline;

と入れるだけです。

例）
※widthの設定は適当な数字です。

#leftbox   {       display: inline;   
    float: left;   
    width: 180px;   
    height: 200px;   
    margin-left: 10px;   }   

こんにちは。

今日はWEBのお話です。

普段私はSEO講習の講師をさせていただいているので
私の講習を受けた方や、独自にSEOを勉強されている方は
metaタグの存在をご存知かと思います。

meta Keywordsとmeta Description
この２つが代表的なもので

Keywordsには、そのWEBページの内容を表すキーワードを入れ
Descriptionには、そのWEBページの説明文を入れていきます。

最近ではこのmetaタグはSEO的には重要な要素では
なくなってきているという話でしたが

YahooでもGoogleでも、このmetaタグは
サイトの検索順位決定には影響しなくなっているということです。

まぁ、もともとmetaタグは、検索順位決定要素としては
低いものだったので、それほど驚くことではないのですが・・・。

さて、ここで考えなくてはいけないのは
検索順位決定に影響しなくなったmetaタグを入れるか入れないかということです。

順位に影響しないのであれば入れなくてもいい？

いえ、必ず入れるようにしましょう！！

直接の順位決定に影響しなくても
metaタグを利用することでWEBページ内にキーワードを盛り込むことができ
そのページと、SEOキーワードの関連づけには役立ちます。

ですから、順位決定に影響しなくても必ず入れるようにしましょうね♪

以上です。

パソコンスクールISA船橋校　並木

こんにちは。

今日はPhotoshopの画像のワープ機能をご紹介します。

画像のワープ機能を利用することで
画像を円形のオブジェクトに巻きつけるような作業を
簡単に行うことができます。

例えばこんな風に・・・

次のような２つの画像があります。

【１】猫の写真

【2】女性とコーヒーカップの写真

この女性が手にもっているコーヒーカップに
猫の写真をうまく合成して・・・

【完成例】

こんな感じに仕上げることができます。

猫の写真を女性が持つコーヒーカップにうまく巻きつけて
その後自然に見えるようにレイヤースタイルを使っています。

では手順です。

１、猫の画像をコピーして、女性とコーヒーカップの画像に貼り付けます。

その後、猫の画像の大きさをカップの大きさくらいまで小さく調整します。

また、今回コーヒーカップが少し斜めに傾いていますので、小さく調整した
猫の写真も同じように少し回転して傾けておきます。

２、次に、変形した猫の写真を選択してある状態で
【編集】メニュー＞【変形】＞【ワープ】を選択します。

３、すると、選択していた猫の写真にます目が表示されます。

４、表示されたます目の四隅の□や、その四隅の□を動かすことで表示される
方向線等を動かして、カップに沿うように変形していきます。

５、カップの形に綺麗に沿うように変形することができたら
猫の画像のレイヤーのレイヤースタイルを【オーバーレイ】に変更して
自然になじむようにします。

６、これで完成です！！

 いかがでしょうか？

 画像のワープ機能は非常に簡単に行うことができますが
アンカーポイントや方向線の調整が少し難しいと思います。

今回はカップがもともと斜めに傾いている状態だったため
少し難易度が高いかもしれません（＾－＾；）

それにしてもPhotoshopは本当に色々な機能があり
楽しめますね♪

皆さんも面白い機能があれば色々と教えてくださいね♪

 パソコンスクールISA　船橋校　並木

こんにちは。

今日はPhotoshopのVanishing Pointで遊びたいと思います。

Vanishing Pointとは、画像の遠近感に合わせて拡大や縮小・変形を
自動的に処理をしてくれる機能です。

この機能を利用することで、画像やテキストを遠近感を持たせたまま
配置させることもできます。

・・・

文章にするとちょっと難しいので
こんなことができますよ！という例をあげますね♪

例えば・・・

以下のような2つの画像を用意します。
１つは、Photoshop上で「ISAPC」と書いたファイル
もう１つは、建物の画像ファイルです。

この2つの画像をVanishingPoint機能を利用して合成します。

すると・・・

建物の壁に「ISAPC」という文字を遠近感を保ったまま合成することができました！

このように、別々の画像を1つにまとめる際に
Vanishing Pointを利用すると遠近感そのままに合成することができるんですね♪

では早速手順をご紹介します。

１、まずは建物の画像の方で、【フィルタ】メニュー＞【Vanishing Point】を選択します。

２、VanishingPointウィンドウが表示されます。
遠近の４つのコーナーポイントを順番にクリックしていき定義していきます。
下図の赤い丸で囲まれた部分を順番にクリックしていくと
自動的に「遠近グリッド」が作成されますよ。

３、ここまで出来たら一度VanishingPointウィンドウは【OK】ボタンで閉じます。

４、次に壁に貼り付けたい文字を範囲選択してコピーします。

５、貼り付けたい文字のコピーが終わったら、先ほどの壁の写真に戻り
再度【フィルタ】＞【VanishingPoint】を選択します。

すると、先ほど作成した遠近グリッドが残っていると思います。

その状態で、先ほどコピーした文字を貼り付けます。
貼り付けるときには【Ctrlキー】+【V】で貼り付けてみましょう。

すると、以下の図のようになります。

６、貼り付けされた「ISAPC」というデータを、ドラッグして
あらかじめ作成してある遠近グリッド内に持っていきます。

すると、遠近グリッドに沿って「ISAPC」の形が変形されます。

７、あとはVanishingPointウィンドウ内にある【変形】ツールを利用して
「ISAPC」の文字の大きさ等を調整します。

８、これで完成です♪

いかがでしたか？

ちょっと長いブログになってしまってすみません（＾－＾；）

なかなか言葉だけで手順を説明するのは難しく
わかりづらいところもあるかと思います。

ぜひぜひご自身でお試しになってみてくださいね♪

パソコンスクールISA船橋校　並木

こんにちは。

久しぶりのブログになってしまいました（＾－＾；）

今日はPhotoshopのお話です。

Photoshopの機能の中に【レンズ補正】という機能があります。

この機能は、広角レンズやローアングルの撮影などの際
カメラのレンズによって生じるゆがみを簡単にすばやく補正する機能です。

本当は、上記のようにゆがみを補正する機能なのですが
今回はその機能を逆に利用して
普通の写真を魚眼レンズ風にアレンジしてみたいと思います。

まずは元画像の状態からご紹介します。

 そして完成例です。

 いかがでしょうか？

なかなかいい感じですよね♪

では手順をご紹介します。

１、【フィルタ】メニュー＞【変形】＞【レンズ補正】を選択します。

２、あとは表示されるダイアログボックス内のつまみ等を
自由に動かしてプレビューを見ながら操作をしてみましょう♪
（すみません、アバウトな説明で（笑））

でも決まった設定というのがありませんので
自分の好みの形になるように動かしてみるのが大切ですよ♪

ぜひぜひちょっと凝った写真の加工として
お使いくださいね♪

パソコンスクールISA　船橋校　並木

こんにちは。

先日このブログの記事の中で
写真にドット調の加工を施したものを掲載したところ

「どうやって作ったの？」というご質問をいただきましたので
今回は利用したブラシをご紹介したいと思います。

先日掲載したドット調の加工というのは下記の画像です。

これは実は、無料でブラシのダウンロードができるサイトにて公開されていたものを
利用させていただいております。

ドット調の加工は【カラーハーフトーン】を利用することで作成もできますが
今回は手軽にブラシ機能で行っています。

今回利用させていただいたサイトは

【Brusheezy】というサイトです。

こちらのサイトには様々なブラシやパターンがダウンロードできるようになっていて
それをフォトショップに読み込むことでご自身のフォトショップで使えるようになります！！

 取り込み方は下記の通りです。

まず目的のブラシファイルをダウンロードし、解凍します。

その後フォトショップを起動し
【ブラシ】ツールを選択後、ツールオプションバーのブラシの種類を選択する▼から
以下の画面ショットの通りに進み、【ブラシファイルの読み込み】を選び
あとはダウンロードしたブラシファイルを選択すればOKです。

そうすると、ブラシの一覧の中に読み込んだブラシがでてきますよ♪

ぜひお試しくださいね。

パソコンスクールISA 船橋校　並木

こんにちは。

今日はPhotoshopのテクニックをご紹介します。

雑誌やWEBで使われる素材は
やはり少しでもキレイに仕上げることが
よいものを作るポイントになります。

今回は、ある女性の画像をPhotoshopを利用して
さらに美しくする方法です。

 まずは元の画像です。

この画像は、すでにナチュラルな感じが出ている良い素材です。

では、これから少しずつ更にキレイにしていきます。

まずは、鼻の横から口角にかけて「八の字」型に広がる皺(しわ)、豊麗線【ほうれいせん】を
消していきます。

これは、修復ブラシツールを利用します。
ブラシの種類は周りがぼんやりぼけた雰囲気のブラシにするように
ツールオプションバーのブラシピッカーを表示し、硬さを【0％】にします。

修復ブラシツールで、肌の色がきれいな部分にカーソルを持っていき
Alt+クリックで、その肌の部分を修復ブラシツールに記憶させます。

その後、豊麗線の上にカーソルを持っていき
トントントンとマウスでたたくようにクリックして
徐々に豊麗線を消していきます。

徐々に消していくのがポイントです。
またドラッグで消そうとするのではなく、あくまで叩いて消していくようなイメージです。

ちょっとここまでの出来具合を見てみましょう！
【補正前】

【補正後】

いかがでしょうか？
これだけでもだいぶ印象が違いますよね！

では、続きに入ります。

今度は唇の色です。

元の画像は、唇の色があまり健康そうに見えません。
今回は淡いピンク色にしていきたいと思います。

まずは、唇用の新規レイヤーを追加し
その追加したレイヤーはレイヤーパレット内で一番上に移動しておきます。

そして、ブラシツールを選択します。
ブラシの種類は、周りがぼけた雰囲気のブラシを選択し、描画色は赤にします。

このブラシで、唇を思い切ってなぞります。

皆さん、不安にならないでください（笑）

この後、うまくなじませていきます。

では、唇を描いたレイヤーの不透明度を
下げていきます。

不透明度はレイヤーパレットの右上の部分で
設定ができますので、唇のレイヤーを選択して調整します。 

不透明度の値は任意でかまいませんが
今回の完成例は、【20％】にしています。

このような感じになります。

 これで、豊麗線と唇の処理が終わりました。

最後に髪の色です。

今回は、髪の色が茶色です。
このままでも問題ありませんが、光に当たって茶色が目立ちすぎていて
少し痛んだようにも見えます。

そこで、髪の毛の色を落ち着かせて、痛んだように見える部分を
補正していきます。

今回は、「焼きこみ」ツールを選択して行います。

焼きこみツールは簡単に言うと、ドラッグした部分の色を
暗くするツールです（すごく簡単に言っています）

焼きこみツールを選択し、髪の毛の色が茶色すぎる部分を
ドラッグして色を落としていきます。

ということで完成です。

まず、補正前の状態は下記です。

そして完成例が下記です。

いかがでしょうか！？

だいぶ印象が変わりましたね♪

このような感じで、少しの補正で印象も変わります。

機会がありましたらぜひお試し下さい♪

パソコンスクールISA船橋校　並木

こんにちは。

WEBデザインってすごく難しいですよね。

実際にパソコン教室で授業をしている生徒さんたちも
難しさを感じると思います。

「デザイン」＝「個性」でもありますので
正解はないと思うのですが
それでもやっぱり頭にイメージが湧いてこない
ということは多いと思います。

そういったときに参考になるのが
様々なWEBテンプレートを紹介しているページ。

今日はその１つを紹介します。

http://www.mizutamari.net/free-template.html

このサイトには、様々WEBテンプレートが用意されていて
その中には無料でダウンロードできるものも用意されています。
（もちろん有料のものもございます）

無料のものはダウンロードが自由ですので
ダウンロードして自分なりにアレンジしたり
自分で参考にしてデザインの幅を広げたりすると
良い勉強になるのではないでしょうか。

やはり普段からそういった様々なデザインに目を向けていると
自然と色々なアイデアが浮かんでくるようになると思います！

ぜひ参考になさってください。

パソコンスクールISA船橋校　並木

こんにちは。

いまやすっかり有名になったネット上の地図サービス【Googleマップ】

Googleのコンテンツの１つですが
本当にすばらしい機能です。

皆さんも使ったことはありますか？？

使ったことがない方、ぜひ下記からお試しください。
http://maps.google.co.jp/maps

Googleマップのページにアクセスすると
検索ボックスが表示されていますので
試しに自分の住所を入れてみてください。

自宅近くの地図がしばらく待っていると表示されます。

ただ表示されるだけであれば
他の地図サービスと同じなのですが
Googleマップはさらにすごい機能が搭載されています。

なんと地図中でマウスをドラッグすると
その場で地図の表示位置を変更することができるんです。

試しに以下の地図でやってみましょう。

これは私がパソコンスクールISA船橋校の地図を表示して
それをこのブログに設置したものです。 

いかがでしょうか？

地図上でドラッグすると、地図を移動できましたよね！！

私が初めてこのGoogleマップに出遭ったときは
楽しくて世界中旅をしました（笑）

Googleアカウントを持っていれば、こんな風に自分のWEBページに
マップを導入することもできますよ！

パソコン教室で学習されている方で興味がある方は
私並木にお声をかけてくださいね♪

パソコンスクールISA　船橋校　並木

こんにちは。

WEB制作をするときに迷うのが
ボタンやバナー、メニュー等のデザイン。

色々凝りたくはなるのですが
「Simple is Best」という言葉があるように
意外とシンプルな方が、サイトがまとまりやすいということがあります。

今回は、あえてシンプルなデザインのメニューを作ってみたので
参考にしてみてくださいね♪

画像をクリックすると全体を見ることができます。

例えばこのようなメニュー。

まだまだ改善の余地はたくさんあるのですが
背景に単純にグレーと白のグラデーションをかけ
その上に角丸の薄い白いラインが入っているだけです。
テキストは、灰色で縁取りしています。

次はこちらです。

基本的には同じような感じなのですが、今回はグラデーションをかなり薄めにかけています。

背景に淡いブルーと白のグラデーションをかけ
そのグラデーションをちょうど半分で区切るように白いオブジェクトを重ねています。

テキストは白で縁取りをしています。

最後はこちらです。

これこそ究極のシンプルさです。

背景は白、下にラインを入れて、テキストを入力しただけです。

手抜きと言われてしまえばそこまでなのですが（笑）

どれも確かに手はかかっていません。
制作時間は１つ5分程度です。

実はサイトの雰囲気を壊さずにボタンやバナーを制作するコツというのがあります。

上記の3つのバナーもすべて共通しているのですが
下記がうまくまとめるコツです。
というよりは、個人的に意識して作っているポイントと言った方がよいですね♪

・色は全体的に薄めに
・一つのバナーやボタンの中で利用する色は多様せず、同系色でまとめる

これだけです。

意外と「色を薄めに」というのが重要だったりします。

初めて制作すると、どうしても色々な色を使ってしまいます。

そうすると一見華やかにはななりますが
出来上がったものを見ると、まとまりがなく、色が多すぎてどこが大切な情報なのかが
わからなくなってしまうことがあります。

ですので、色を決めるときは「薄めに」という意識をもつと
サイト全体をうまくまとめることができますよ。

ぜひ参考になさってくださいね★

 パソコンスクールISA　船橋校　並木