スタッフブログ

大分暖かくなってきましたが、まだまだ朝晩は寒いです…。

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

 

さて、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を覗いて「これかなー？」ってところを変更してみれば、たいてい上手くできると思います。
いろいろ試してみてください。

　
東京でもついに桜が開花しましたね！
東京の見ごろは今週末あたりでしょうか。
気候も良いこの季節は、
街を歩くだけでなんだかうきうきしてしまう
幸い花粉症とは無縁のスタッフの「な」です。
　
　
さて、わが社でも2日に入社式が行われ、
フレッシュな新人研修真っ只中です。
　
スクールにいらっしゃる生徒さんのなかにも、
新人研修として利用してくださる方もいらしたり、
4月らしい雰囲気に包まれています。
　
新人さんだけでなく、
部署異動や転職などのために
新しいスキルを身に付けにいらっしゃる方も
たくさんなのがこの季節。
　
そんな皆様を応援したい！と
スクールでは期間限定で大変お得★な
キャンペーンパックをご用意しました！！

 

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

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

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

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

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

 春が恋しかったくせに花粉症に泣かされている「あ」です。

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

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

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

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

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

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

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

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

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

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

まだまだ寒い日が続く中、DTPエキスパート更新試験に奮闘中のスタッフ「の」です。

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

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

 

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

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

 

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

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

 

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

 

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

 

うまく消せれば完成。

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

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

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