さて、私が担当した前回ブログで、『CS6』の発売は6月頃と記載しましたが、
もう、出てしまいました…。

そんなことは気にせず『Photoshop CS6』より新機能の『コンテンツに応じた移動ツール』を紹介します。

このツールの素晴らしい所は、物体などを移動した際に、物体の後ろには、こういうのがあったでしょ？
というのをPhotoshopが作ってくれるところです。

とりあえず、このような画像を用意しました。

ゴルフをやってる人がとても下手で、このままだと外しそう…。
そこで、『コンテンツに応じた移動ツール』を使用してホールをゴルフプレイヤーに近づけてみました。

そして、このツール移動だけでなく、コピー移動も出来るので、
いっそ、ホールを増やしてみました。
これなら外さないでしょう。

移動にするか、コピー移動にするかは、ツールオプションバーの『モード』で指定できます。
対象物の調整は『適応』で調整します。

下の画像は犬を増やしてみた画像です。

是非、色々と試してみてください。

『Photoshop』を基礎から習得したいという方は、当スクール『Photoshop講座』にてお待ちいたしております。

以上、スタッフ『の』でした。

私は、シフトに恵まれ、しっかりと連休をいただくことができたので、
完全に頭も体もリフレッシュしてきましたっ！

お久しぶりです。スタッフ「ほ」です。

さて、今日はCSSで、リンクの装飾に関するネタです。

通常、文字に対してリンクを張ると、文字の色は青くなり、下線が設定されます。

通常はリンクの線は一本線で、この種類を変更することはできないのですが、ちょっと変則的な方法を利用すると、線の種類を別の線種に変更できます。

先に手順だけを書くと

１．リンク文字の下線を消す
２．リンクのボックスが持つ下罫線を設定する

の２つです。

まずはHTMLのファイルでリンクを張った文字列を用意しましょう。

<p>
  詳細は
  <a href="http://www.vanfu-vts.jp">バンフーのサイト</a>
  をご覧ください
</p>

この段階では、以下のような状態ができているはずです。

※サンプル

まずはリンク文字が持つ下線を外します。

CSSに以下を記述します。

a {
	text-decoration:none;
}

リンクの<a>タグから「文字飾りを『無し』にする」という指定です。

この指定によって、まずは下線が外れます。

※サンプル

リンクの<a>タグは、以下のようなボックスを持っています。

このボックスは通常、無色透明なので、目で見ることができませんが、CSSを利用して上下左右に罫線をつけることができます。

今回は、上下左右のうち、下の罫線をCSSで表示させることで、リンク文字の下線代わりにしてしまおう、というものです。

先程のリンクに追加していきます。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
}

※サンプル

リンクの文字の色と下線を合わせるには、colorプロパティを指定して、罫線と同じ色を指定します。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
	color:#000;
}

※サンプル

訪問済みの色を指定したい場合は疑似クラスセレクタをさらに追加します。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
	color:#000;
}

a:visited {
	border-bottom:1px dotted #ccc;
	color:#ccc;
}

※サンプル

マウスポインタを乗せた時に色を変えたい場合は、さらにさらに追加します。

a {
	text-decoration:none;
	border-bottom:1px dotted #000;
	color:#000;
}

a:visited {
	border-bottom:1px dotted #ccc;
	color:#ccc;
}

a:hover {
	border-bottom:1px dotted #f80;
	color:#f80;
}

※サンプル

今回指定した「dotted」は点線を意味します。

これを「dashed」に変更すると破線になります。

また、線の太さが3px以上必要になりますが、
「double」という指定をすることで二重線の表現も可能です。

バンフートレーニングスクールの母体は
◆◇　『印刷会社』　◇◆　って、ご存知でしたか？

　　
印刷に加えて、DTP、WEBも取り扱う[総合デジタル企業]が
運営する”パソコンスクール“なので、
母体のノウハウがしっかり活かされた、
より実践的な講座が用意されているんです！
　
　
だから、

習ってすぐに役立つスキルばかりが身につく！
＝ 今日習って、明日使いたい！という人にぴったり。
　
　
お仕事で、就転職で、趣味で。
目的は様々ですが、
短期間でスキルを習得したいという
たくさんの方にご利用いただいています。

　　
　
そんなスクールの母体『株式会社　帆風』が
毎月お客様への感謝の気持ちをこめてご用意している
★マンスリーギフト★

今月は・・・

おりがみ！？

いえいえ、中にはメッセージカードが！

　
　
スクールにおいてありますので、
ご来校の際はどうぞお一つお持ち帰りください！

http://www.vanfu-vts.jp/

ゴールデン期間中(4/28～5/6)の受付時間は以下の通りになります。

●電話受付時間
4/28(土) 9:00-18:00
5/1(火) 9:00-18:00
5/2(水) 9:00-18:00

5/7から平常通りの営業となります。

●メール受付
基本的には、上記の電話受付時間と同じですが、
お急ぎのお申込みやお問合せに関しましては
以下の通り対応させていただきます。

4/28(土)18:00以降～4/30(月)受信分
⇒5/1(火)に返信致します。

5/2(水)18:00以降 受信分
⇒5/3(木)に返信致します。

5/3(木)18:00以降～5/4(金)受信分
⇒5/5(土)に返信致します。

5/5(土)18:00以降 受信分
⇒5/7(月)に返信致します。

大変ご不便をおかけいたしますが、
よろしくお願い致します。

http://www.adobe.com/jp/products/indesign.html

↑ビデオ説明なども再生できます。

主にアピールされているのは、やはり電子書籍関連です。
iPad用に縦横レイアウトが簡単にできる機能、各種スマートフォンの画面サイズに応じて作成する方法などです。

ただ、前回バージョンより電子書籍強化のインパクトはあまりない気がします。まだ体験版が出ていないのでなんともですが、せめてパネルの説明などに日本語が増えていたら使いやすいのになと期待しています。

文字関連だと、文字があふれた時にテキストフレームが自動で拡大してくれる機能がうれしいですね。他にもInDesignでこれまでできなかった「ウィンドウ分割表示」、「グレースケールプレビュー」もよさそうです。

スクールではまず、フリースペースに置いてあるノートパソコンにCS6を導入する予定です！

まずは、基本からご興味ある方は、バンフートレーニングスクールのInDesign講座にてお待ちしております。

それでは皆様、よいＧＷを！開校している授業もありますのでご予約はお早目に！

相変わらず寒いのが苦手なスタッフ『の』です。

さて、6月頃に発売されるであろう『CS6』。

それに先駆けて『Photoshop CS6 パブリックベータ版』の試用が出来ます。（5月31日まで）

要求されるマシンスペックは以下になります。

Macユーザーの方に朗報なのは、ようやくMac OS X Lionに正式対応といったところでしょうか。

インストールして起動してみるとこのような感じです…。

何か黒くなりました…。

使いにくくなったんじゃないだろうか…と、思ったら『環境設定』で変えられました。

カラーテーマを変えてみたらそんなに変わってませんでした。

しかし、従来のツールが強化されてたりするので、次回以降のブログで少しづつ紹介していきたいと思います。

まずはこちらからダウンロードしてみてください。

http://www.adobe.com/jp/joc/photoshop/photoshop/ps6beta/

『Photoshop』を基礎から習得したいという方は、当スクール『Photoshop講座』にてお待ちいたしております。

以上、スタッフ『の』でした。

桜も一気に咲いて満開です。

こんにちは。桜大好きスタッフ「ほ」です。

お花見は桜が満開になる直前くらいにやる人が多いですが、個人的に桜は散り際が一番キレイだと思うので、個人的な見ごろは今週末じゃないないか？と思っています。

さて、今日は久しぶりのDreamweaverネタです。

授業でたまに受けるご質問に
「マウスを当てるとツルッと下にサブメニューが出てくるナビゲーションバーを作りたいんですが…」
というものがあります。

↓こんなやつですね。

これ、Dreamweaverを持っていれば、比較的簡単に作れます。

Dreamweaverには、SpryというAdobe社がJavascriptがわからない人でも、簡単にJavascriptを扱えるようにしてくれた機能です。

最終的にはJavascriptは自分で書けたり修正できるのが理想なのですが、手っ取り早くメニューを作りたい！といった場合には、もう本当にお手軽な機能です。

ということで作り方のご紹介。

まず、メニューを作成するファイルを開いてください。

挿入したい位置にカーソルを立て、「挿入」メニューから「Spry」⇒「Spryメニューバー」をクリックします。

作成するメニューが横型なのか縦型なのかを聞かれますので、自分が作りたい方を選択して「OK」をクリックします。

すると、これだけで、もう最低限のメニューバーが出来上がります。

とりあえず保存しましょう。

上書き保存の際に「依存ファイルのコピー」というウィンドウが開きます。今回のメニューバーを作成するにあたって必要となるファイルをDreamweaverが保存しようとしている確認なので「OK」をクリックしてください。

では、プレビューしてみます。

↓こんな状態になっているはずです
サンプルを開く

もう、必要な動きができあがってるのがわかると思います。

さぁ、あとは中の文字を書き換えるだけです。

文字の書き換えはプロパティインスペクタを使用します。

作成されたメニューバーの左上にあるタブ部分をクリックすると、プロパティインスペクタが以下のような状態になります。

まず、はじめに表示されているメニューは、この部分です。

項目名を書き換えるときは、項目名をクリックしてパネル右部にあるこの部分を書き換えます。

メニュー項目の追加と削除はこの部分にある「＋」と「－」で行います。

言うまでもなく、「＋」が追加、「－」が削除です。

そしてこの部分がマウスポインタを当てると出てくる下の階層部分になります。

先程と同様にテキストを書き換え、クリックした際のリンク先はこの部分で指定します。

必要に応じて、その下の階層も追加できます。

プレビューして、内容が正しく変更できたかどうかを確認しましょう。

これで完成！…と言いたいところですが、「自分の好みのデザインにしたい！」というご意見もあるかと思いますので、少しだけ装飾のお話を。

Spryメニューバーを作成すると、十数個のCSSセレクタが自動的に生成されます。

この中から、装飾内容ごとの編集ポイントを書いてみます。

●各項目の囲み線を出したい

初期設定では、各ボタンに罫線がついていませんが、CSSスタイルパネルから
「ul.MenuBarHorizontal li」
のCSSルールを開き、「ボーダー」のカテゴリから任意の線を設定してください。

●各項目の幅を変更したい

ナビゲーションの各項目幅は初期設定では8emで設定されています。

これは、中の文字サイズがユーザーによって変更された場合に柔軟に変化する幅です。
が、レイアウトに組み込む際には横幅をpxで固定したい場合もあります。

CSSスタイルパネルから
「ul.MenuBarHorizontal li」
を開いて幅の指定を行います。

マウスを当てた際に出てくるサブメニュー部分の幅は
「ul.MenuBarHorizontal ul」と
「ul.MenuBarHorizontal ul li」
の２つで指定できます。

●マウスオーバー時の背景色を変更したい

初期設定では、マウスを乗せた際にボタンが青い背景色で反応するようになっていますが、この色は
「ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible」
の設定で変更できます。

背景色を自分の好きな色に変更してください。

そのほか、サイズや色に関しては、CSSを覗いて「これかなー？」ってところを変更してみれば、たいてい上手くできると思います。
いろいろ試してみてください。

♪♪♪　キャンペーンパック（Web）♪♪♪
　
　☆パック内容
　　WEB基礎講座
　　ドリームウィーバー講座
　☆期間
　　2012年4月30日 23時59分まで
　☆価格
　　79,800円（消費税・テキスト代込）

　
通常価格90,000円（合計金額）の上記2講座を
大変お得な価格でご提供中です。

詳細・お申し込みはこちら★
http://www.vanfu-vts.jp/campaign/pack798.php

　
大変お得なこのパックは
期間限定でのご提供となりますので、
この機会をお見逃しなく！！

ご不明な点につきましては
バンフートレーニングスクールまでお問合せください！

今回は最近のイラストレーターについた
慣れないとびっくりする機能をご紹介します。

グループ化したオブジェクトを「選択ツール」でダブルクリックすると、
ＣＳ2→グループ化されたオブジェクトの周りにグレーの枠がつく。

ＣＳ3以上→周りが半透明になる。

なんだこれはっ！と説明されないとよくわかりません。
がコレがＣＳ2以上でついた「編集モード」という機能です。
グループ化したオブジェクト内の個別選択ができるという機能です。

ちなみに、どちらも余白をダブルクリックすると元に戻ります。

慣れると「グループ解除」や「グループ選択ツール」などを使わないで編集できるので便利といえば便利です。

ただやはり慣れない、好みでないとなれば
環境設定からこのモードを解除することができます。（ＣＳ3以上）
「編集」メニュー→「環境設定」→「ダブルクリックして編集モード」のチェックをはずしてください。

一つのバージョンの基本を習得さえしてしまえば、
新しいバージョンは新機能の追加だけ覚えればいいのでそこまで気にしなくても使えるのですが、たまーに表示が変わったり、場所が変わったりもします。

そのあたりも気になる方は講習中に聞いてみてください。

では、基本から知りたいという方もぜひ、「イラストレーター講座」にてお待ち致しております。

さて、表題の通り、Photoshopを使ってピントがあったような写真を作ってみます。

↑この画像の「くまのぬいぐるみ」だけにピントがあったような写真にしてみたいと思います。

まず、レイヤーを必要分複製し、分かりやすいようにレイヤー名をかえておきます。

（レイヤー複製のショートカット⇒Mac：コマンド+ｊ、Win:ｃｔｒｌ+ｊ）

↓「ぼかし」レイヤーを選択し、「フィルター」メニュー⇒「ぼかし」⇒「ぼかし（ガウス）」をクリックします。

適度にぼかしをかけます。

↓続いて「シャープ」レイヤーを選択し、アンシャープマスク等、シャープネス処理を施します。

再度、「ぼかし」レイヤーを選択し、ピントが合ってるように見せたい箇所を「消しゴムツール」で消していきます。

うまく消せれば完成。

もっと、画像加工について知りたい、という方は

バンフートレーニングスクールのPhotoshop講座でお待ちいたしております。

以上、相変わらず寒いのと、雨が苦手なスタッフ「の」でした。