フォトショップwebデザインマニュアル http://megane9988.com フォトショップwebデザイナー駆け出しの覚え書き Wed, 30 Dec 2009 13:15:43 +0000 ja hourly 1 PhotoshopでWEBデザインしよう！ http://feedproxy.google.com/~r/megane9988/feed/~3/n-DHlyh_XkU/ http://megane9988.com/photoshop%e3%81%a7web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%97%e3%82%88%e3%81%86%ef%bc%81/#comments Wed, 30 Dec 2009 13:15:32 +0000 ko2o2k http://megane9988.com/?p=290 多くのフォトショップ関連書籍がありますが、WEBデザインを行うためにフォトショップを使う。この目的についての内容が少ないように感じていました。そこで自分で書いてみようと思います。なるべく目的の内容にすぐにリンクできるようなサイトにしたいと考えています。右側のメニュー等からみたいページへリンクしてください。

◆　フォトショップを初めての操作する方　◆

まずはWEBデザイン用に初期設定を変更することから始めましょう

◆　デザイン参考を探している方　◆

すばらしいデザインが世界中に山ほどあります。いいところはどんどん吸収して自分のサイトデザインに活かしましょう。

 

 


]]> http://megane9988.com/photoshop%e3%81%a7web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%97%e3%82%88%e3%81%86%ef%bc%81/feed/ 0 http://megane9988.com/photoshop%e3%81%a7web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%97%e3%82%88%e3%81%86%ef%bc%81/ photoshop tutorial クイックマスクをつかって画像の一部のみを明るくする http://feedproxy.google.com/~r/megane9988/feed/~3/ZFxGWpN5q8g/ http://megane9988.com/photoshop-tutorial-%e3%82%af%e3%82%a4%e3%83%83%e3%82%af%e3%83%9e%e3%82%b9%e3%82%af%e3%82%92%e3%81%a4%e3%81%8b%e3%81%a3%e3%81%a6%e7%94%bb%e5%83%8f%e3%81%ae%e4%b8%80%e9%83%a8%e3%81%ae%e3%81%bf%e3%82%92/#comments Wed, 22 Jul 2009 13:02:16 +0000 ko2o2k http://megane9988.com/?p=225

右の建物は明るいが、左の海は暗い
そんなときに海だけを明るくするチュートリアル

クイックマスクを利用しています。

1.
自動選択ツールで

・範囲を８０ぐらい
・アンチエリアスあり
・隣接あり

の設定で、海を選択

2.
クイックマスクモードに変更

3.
ブラシツールで
抜けている所を塗りながら埋めていく
（ブラシの太さは「と」のキーボードショートカットで変更可能）

4.
全部塗れたら
クイックマスクモード解除
家だけが選択されている状態になる

5.
選択範囲の変更から

選択範囲をぼかすを選択

2pxぐらいぼかして選択の境界を滑らかにする

5.
レイヤーを複製し
選択されている家だけを削除
それをブレンドモードスクリーン


]]> http://megane9988.com/photoshop-tutorial-%e3%82%af%e3%82%a4%e3%83%83%e3%82%af%e3%83%9e%e3%82%b9%e3%82%af%e3%82%92%e3%81%a4%e3%81%8b%e3%81%a3%e3%81%a6%e7%94%bb%e5%83%8f%e3%81%ae%e4%b8%80%e9%83%a8%e3%81%ae%e3%81%bf%e3%82%92/feed/ 0 http://megane9988.com/photoshop-tutorial-%e3%82%af%e3%82%a4%e3%83%83%e3%82%af%e3%83%9e%e3%82%b9%e3%82%af%e3%82%92%e3%81%a4%e3%81%8b%e3%81%a3%e3%81%a6%e7%94%bb%e5%83%8f%e3%81%ae%e4%b8%80%e9%83%a8%e3%81%ae%e3%81%bf%e3%82%92/ WordCamp Tokyo 2009 マットさんのプレゼン｛日本語字幕付き｝動画 http://feedproxy.google.com/~r/megane9988/feed/~3/Eczb3OxsPVE/ http://megane9988.com/wordcamp-tokyo-2009-%e3%83%9e%e3%83%83%e3%83%88%e3%81%95%e3%82%93%e3%81%ae%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%ef%bd%9b%e6%97%a5%e6%9c%ac%e8%aa%9e%e5%ad%97%e5%b9%95%e4%bb%98%e3%81%8d%ef%bd%9d%e5%8b%95/#comments Wed, 22 Apr 2009 05:57:12 +0000 megane http://megane9988.com/?p=212 先日行われました、WordCamp Tokyo 2009 でのマットさんの基調講演が字幕付きで、WordCamp公式サイトにアップされてました！

当日私も参加したのですが、英語のスキルがほぼ無いdown.gifために、確り理解できませんでした。
なので、今回のはとても助かります。

あとでゆっくり見ます。

さらにマイケルさんの動画も

WordCamp Tokyo 2009 プレゼンの日本語字幕付き動画を公開

WordCamp Tokyo 2009 にてマット・マレンウェッグ氏およびマイケル・ピック氏が英語で行ったプレゼンテーションの日本語字幕付き動画を公開しましたのでお知らせします。

引用元: WordCamp Japan » WordCamp Tokyo 2009 プレゼンの日本語字幕付き動画を公開.


]]> http://megane9988.com/wordcamp-tokyo-2009-%e3%83%9e%e3%83%83%e3%83%88%e3%81%95%e3%82%93%e3%81%ae%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%ef%bd%9b%e6%97%a5%e6%9c%ac%e8%aa%9e%e5%ad%97%e5%b9%95%e4%bb%98%e3%81%8d%ef%bd%9d%e5%8b%95/feed/ 0 http://megane9988.com/wordcamp-tokyo-2009-%e3%83%9e%e3%83%83%e3%83%88%e3%81%95%e3%82%93%e3%81%ae%e3%83%97%e3%83%ac%e3%82%bc%e3%83%b3%ef%bd%9b%e6%97%a5%e6%9c%ac%e8%aa%9e%e5%ad%97%e5%b9%95%e4%bb%98%e3%81%8d%ef%bd%9d%e5%8b%95/ flickerからWordPressに投稿する方法 http://feedproxy.google.com/~r/megane9988/feed/~3/wd_qnn6alNg/ http://megane9988.com/flicker%e3%81%8b%e3%82%89wordpress%e3%81%ab%e6%8a%95%e7%a8%bf%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/#comments Wed, 22 Apr 2009 02:13:38 +0000 megane http://megane9988.com/?p=192 flickerにアップした画像から、すぐにWordPressに投稿できるということがわかったので
ご紹介いたします。

1.flickerにログインしたら、右上の自分の名前をクリック

15

 

2.中ほどにある、タブの右端　”Extending Flickr”をクリック

2

 

3.Your blogsの”Configure your Flickr-to-blog settings.”をクリック

3

 

4.Set up your blogをクリック

4

 

5.プルダウンからWordPressを選ぶ

5

6.必要事項を記入

ここでポイント！！

API Endpoint:　の部分には
http://www.自分のブログのURL/xmlrpc.php と記載します。

6

 

7.上記が成功すれば、必要な情報が読み込まれ表示されます。

7

 

8.次にテンプレートのカスタマイズに進みます。

”create a custom posting template ”をクリック

8

 

9.レイアウトを選ぶ

自分のブログの幅などを考えて、写真サイズとレイアウトをえらびましょう。

9

 

10.USE THISをクリック

カスタマイズしたい人はCUSTOMIZEをクリック

10

 

 

11.確認　YESをクリック

111

 

 

お疲れ様です！これにて設定は完了fuji.gif

 

実際の投稿は、自分の写真の上部表示される
BLOG　THISのアイコンから投稿できます。
投稿時のカテゴリはディフォルトになる模様です。

14

 

たくさんアップしてる写真を
flickerだけにしとくの勿体ないですもんね。

これなら、画像はとりあえずflickerにあげといてってのもありかともいました。

 

とここまで書いておいて、そんなことができるプラグインがきっとあるに違いない。。。
とおもってググったら、やっぱりありました。。

著作権を気にせず Flicker の写真を利用できる、ワードプレスのプラグイン「Photo Dropper」 – VARL（ヴァール）.

↑
CCにも配慮して、他の人のまで投稿できるじゃん！

そのほかなんか、いいのあったら教えてください。

 

では。

 

 

 


]]> http://megane9988.com/flicker%e3%81%8b%e3%82%89wordpress%e3%81%ab%e6%8a%95%e7%a8%bf%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 1 http://megane9988.com/flicker%e3%81%8b%e3%82%89wordpress%e3%81%ab%e6%8a%95%e7%a8%bf%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ 八重桜が満開 http://feedproxy.google.com/~r/megane9988/feed/~3/CGwYjVDTbuA/ http://megane9988.com/%e5%85%ab%e9%87%8d%e6%a1%9c%e3%81%8c%e6%ba%80%e9%96%8b/#comments Wed, 22 Apr 2009 01:32:38 +0000 megane http://megane9988.com/%e5%85%ab%e9%87%8d%e6%a1%9c%e3%81%8c%e6%ba%80%e9%96%8b/

家の近所です。
とりあえず八重桜満開で、おにぎり食べながら、ビール。

ウマーー！


]]> http://megane9988.com/%e5%85%ab%e9%87%8d%e6%a1%9c%e3%81%8c%e6%ba%80%e9%96%8b/feed/ 0 http://megane9988.com/%e5%85%ab%e9%87%8d%e6%a1%9c%e3%81%8c%e6%ba%80%e9%96%8b/ きのこの山パズル(ｆｌｉｃｋｅｒからのテスト) http://feedproxy.google.com/~r/megane9988/feed/~3/6qGYVyX4Has/ http://megane9988.com/%e3%81%8d%e3%81%ae%e3%81%93%e3%81%ae%e5%b1%b1%e3%83%91%e3%82%ba%e3%83%ab%ef%bd%86%ef%bd%8c%ef%bd%89%ef%bd%83%ef%bd%8b%ef%bd%85%ef%bd%92%e3%81%8b%e3%82%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88/#comments Wed, 22 Apr 2009 01:15:12 +0000 megane http://megane9988.com/%e3%81%8d%e3%81%ae%e3%81%93%e3%81%ae%e5%b1%b1%e3%83%91%e3%82%ba%e3%83%ab%ef%bd%86%ef%bd%8c%ef%bd%89%ef%bd%83%ef%bd%8b%ef%bd%85%ef%bd%92%e3%81%8b%e3%82%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88/
きのこの山パズル, originally uploaded by megane9988.

ええ、友人宅においてありまして、
全てのキノコを外側に向けなければなんですが、、、

1時間経過。。。

きびしいっす。。orz

 

 

 


]]> http://megane9988.com/%e3%81%8d%e3%81%ae%e3%81%93%e3%81%ae%e5%b1%b1%e3%83%91%e3%82%ba%e3%83%ab%ef%bd%86%ef%bd%8c%ef%bd%89%ef%bd%83%ef%bd%8b%ef%bd%85%ef%bd%92%e3%81%8b%e3%82%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88/feed/ 1 http://megane9988.com/%e3%81%8d%e3%81%ae%e3%81%93%e3%81%ae%e5%b1%b1%e3%83%91%e3%82%ba%e3%83%ab%ef%bd%86%ef%bd%8c%ef%bd%89%ef%bd%83%ef%bd%8b%ef%bd%85%ef%bd%92%e3%81%8b%e3%82%89%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88/ 18人も登録いただきまして感謝！ http://feedproxy.google.com/~r/megane9988/feed/~3/K52cicIUI3g/ http://megane9988.com/18%e4%ba%ba%e3%82%82%e7%99%bb%e9%8c%b2%e3%81%84%e3%81%9f%e3%81%a0%e3%81%8d%e3%81%be%e3%81%97%e3%81%a6%e6%84%9f%e8%ac%9d%ef%bc%81/#comments Tue, 21 Apr 2009 11:31:44 +0000 megane http://megane9988.com/?p=177 18人

先日貼り付けました、フィードバーナーの人数がやっと表示されまして、
なんと18名も！！

こんな辺境のブログを購読いただきましてありがとうございます。
一人ひとりお礼のメールを書きたいぐらい。tulip.gif

検索結果からも、ウェブデザインのことやら、photoshopの事やらで
コチラに来られる方が多いようですので、

なるべくそういうネタを発信できるようにしてきますね。
今後ともよろしくお願いいたします。

 

このfooterに使っているブログツールですがどれも
SEO的に効果があるといわれているツールです。
とりあえず貼り付けとけ！ぐらいしか詳しいことはわかりませんが、
よろしければご利用くださいませ。

1.フィードバーナー

これを使うと、各種ＲＳＳリーダーに登録していただきやすくなりますね。
ＷｏｒｄＰｒｅｓｓのプラグインでは、通常のＲＳＳのＵＲＬを
フィードバーナー用にリダイレクトしてくれるプラグインがあります。

どちらもフィードバーナーのサイトからゲットできます。

 

2.あわせて読みたい

こちらは似たようなサイトを紹介してくれるブログパーツです。
当然逆もありますので、他のサイトで自分のサイトが
あわせて読みたいになる場合もあるってことですね。heart01.gif

登録はあわせて読みたいのサイトから

 

3.feedmeter

feedmeterは、星と棒線が見えるやつです。diamond.gifdiamond.gifdiamond.gif
購読者が増えたりすると星が一つから2つ、2つから3つと増えるわけですね！
これは投稿者のモチベーション維持につながりそうです。

フィードメーター -ブログの人気度と更新頻度を測定する無料サービス

4.なかの人

これはちょと特殊なアクセス解析ですね。アクセスがあった地域や男女比、
さらにはどの会社からアクセスあったか？なんてのも分かってしまいます。

でも私のサイトでなにか役にたつのかなあ。。まあいいです。そのうちわかるはず。。

無料アクセス解析ツール with 位置情報ブログパーツ 「なかのひと」

 

以上がｆｏｏｔｅｒの一番左端にまとまってるブログパーツです。
とはいえ、これらはこて先のテクニック。

実際には有意義でナイスな情報を頻繁に更新してるブログに
アクセスが集まるのはいわずもがなですね。

 

以上です。

 

そうだ、コメント！
よかったらお気軽にどうぞ。

せっかくグラバターもありますし。
使ってやってください。

あといいブログパーツあったら教えてください。
貼り付けまくりたい！

 


]]> http://megane9988.com/18%e4%ba%ba%e3%82%82%e7%99%bb%e9%8c%b2%e3%81%84%e3%81%9f%e3%81%a0%e3%81%8d%e3%81%be%e3%81%97%e3%81%a6%e6%84%9f%e8%ac%9d%ef%bc%81/feed/ 1 http://megane9988.com/18%e4%ba%ba%e3%82%82%e7%99%bb%e9%8c%b2%e3%81%84%e3%81%9f%e3%81%a0%e3%81%8d%e3%81%be%e3%81%97%e3%81%a6%e6%84%9f%e8%ac%9d%ef%bc%81/ 便利なブックマークレットを駆使しよう！ http://feedproxy.google.com/~r/megane9988/feed/~3/q5dUxqvCbvI/ http://megane9988.com/%e4%be%bf%e5%88%a9%e3%81%aa%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af%e3%83%ac%e3%83%83%e3%83%88%e3%82%92%e9%a7%86%e4%bd%bf%e3%81%97%e3%82%88%e3%81%86%ef%bc%81/#comments Mon, 20 Apr 2009 16:56:09 +0000 megane http://megane9988.com/?p=172 はてブstep1

ブックマークレットとは、お気に入りに登録しておくと、それをクリックしただけで、
さまざまな機能が使える便利な代物です。diamond.gif

ブックマークレットの使い方についてはlivedoor クリップ – ブックマークレットの設定がわかりやすいと思います。

で、私が使っているものをちょとだけご紹介。
どれもドラッグアンドドロップでブックマークツールバーなどにいれれば使えます。 

1.英語を日本語にさっくり翻訳

 グーグル翻訳
↑
英語のサイトを開いてこれを使うと、日本語に一発翻訳してくれますicon_razz.gif。

 

2.RSSを速攻で登録

グーグルリーダ登録 
↑
グーグルのRSSリーダーに一発登録
ガンガン登録しましょう。1日1000超えると、まあ諦めもつきますicon_lol.gif。。 

 

3.はてブに登録

3.はてなブックマーク登録
↑
もう、ブラウザのおきにいりは、あまり必要ないですね
あまり、、というのがポイントですdog.gif。

 

というわけで、前置き長くなりましたが、
本日紹介したかったのはこちら、

4.今見てるサイトのＵＲＬをaタグつきでゲット！

瞬時に見ているURLのaタグを作成するJavaScript完結のブックマークレット

 それのブックマークレットはこちら

今日、見つけまして、これがほしかったupwardright.gif
ＦｉｒｅＦｏｘだと、オートアンカーってプラグインがあるので、問題ナッシングなのですが、
クロームだと、いちいち、面倒だったんですよね。

たすかりました。

以上、ご報告まで。 

 


]]> http://megane9988.com/%e4%be%bf%e5%88%a9%e3%81%aa%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af%e3%83%ac%e3%83%83%e3%83%88%e3%82%92%e9%a7%86%e4%bd%bf%e3%81%97%e3%82%88%e3%81%86%ef%bc%81/feed/ 0 http://megane9988.com/%e4%be%bf%e5%88%a9%e3%81%aa%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af%e3%83%ac%e3%83%83%e3%83%88%e3%82%92%e9%a7%86%e4%bd%bf%e3%81%97%e3%82%88%e3%81%86%ef%bc%81/ WordPressに絵文字キターー！ http://feedproxy.google.com/~r/megane9988/feed/~3/OzftnLmHtRg/ http://megane9988.com/wordpress%e3%81%ab%e7%b5%b5%e6%96%87%e5%ad%97%e3%82%ad%e3%82%bf%e3%83%bc%e3%83%bc%ef%bc%81/#comments Mon, 20 Apr 2009 03:13:27 +0000 megane http://megane9988.com/?p=166 emoji

絵文字プラグイン

WordPress Plugins/JSeries » emoji (絵文字挿入)
http://wppluginsj.sourceforge.jp/emoji/

JSeriesで公開されてた絵文字プラグインと、

絵文字画像

WordPressのライバルでもあるTypePadさんが配られてる、絵文字画像を組み合わせました。
http://start.typepad.jp/typecast/#emoji-license

それほど読み込みに時間もかからないし、何より絵文字が使えることで、
フリーのブログに近づいたのがいいと思いますsign01.gifsign01.gif

これで表現がひろがりますね。

しかし、一番の問題は、私が絵文字をあまりつかわないことですが。。down.gif


]]> http://megane9988.com/wordpress%e3%81%ab%e7%b5%b5%e6%96%87%e5%ad%97%e3%82%ad%e3%82%bf%e3%83%bc%e3%83%bc%ef%bc%81/feed/ 0 http://megane9988.com/wordpress%e3%81%ab%e7%b5%b5%e6%96%87%e5%ad%97%e3%82%ad%e3%82%bf%e3%83%bc%e3%83%bc%ef%bc%81/ WordBenchに入ろう！ http://feedproxy.google.com/~r/megane9988/feed/~3/JjlP4Hz7tJE/ http://megane9988.com/wordbench%e3%81%ab%e5%85%a5%e3%82%8d%e3%81%86%ef%bc%81/#comments Sun, 19 Apr 2009 17:19:06 +0000 megane http://megane9988.com/?p=158 wordbench

WordBenchというWordPressユーザーのための地域ソーシャルコミュニティがいま盛り上がってます。我々も”め組”として参加させてもらってます。どんどん人も増えているようで、WordPressの盛り上がりを肌で感じれますね。LOVE WordPressな私としてもうれしい限り！まだ入ってない人で、WordPressに興味のある人はぜひ！

WordBenchのサイトを見てみる

それと、twitterのwordpress_fan もお勧めです。
とりあえず最新の情報はゲットできる模様icon_razz.gif

いま使った絵文字プラグインもこちらで知りました。

絵文字プラグインはこちら。

なんにせよ、最新情報がゲットできるのは助かりますね。
 


]]> http://megane9988.com/wordbench%e3%81%ab%e5%85%a5%e3%82%8d%e3%81%86%ef%bc%81/feed/ 0 http://megane9988.com/wordbench%e3%81%ab%e5%85%a5%e3%82%8d%e3%81%86%ef%bc%81/ ブログからtwitterへの投稿テスト http://feedproxy.google.com/~r/megane9988/feed/~3/3TcWeZEZo2Q/ http://megane9988.com/%e3%83%96%e3%83%ad%e3%82%b0%e3%81%8b%e3%82%89twitter%e3%81%b8%e3%81%ae%e6%8a%95%e7%a8%bf%e3%83%86%e3%82%b9%e3%83%88/#comments Sun, 19 Apr 2009 13:39:42 +0000 megane http://megane9988.com/?p=90 twittertoolというプラグインを入れてみたけど、ちゃんと入っているかな？


]]> http://megane9988.com/%e3%83%96%e3%83%ad%e3%82%b0%e3%81%8b%e3%82%89twitter%e3%81%b8%e3%81%ae%e6%8a%95%e7%a8%bf%e3%83%86%e3%82%b9%e3%83%88/feed/ 1 http://megane9988.com/%e3%83%96%e3%83%ad%e3%82%b0%e3%81%8b%e3%82%89twitter%e3%81%b8%e3%81%ae%e6%8a%95%e7%a8%bf%e3%83%86%e3%82%b9%e3%83%88/ photoshopキーボードショートカット　Ctrl+Deleteの修正 http://feedproxy.google.com/~r/megane9988/feed/~3/uO3SnBzpAHo/ http://megane9988.com/photoshop%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%ab%e3%83%83%e3%83%88%e3%80%80ctrldelete%e3%81%ae%e4%bf%ae%e6%ad%a3/#comments Thu, 02 Apr 2009 02:11:49 +0000 megane http://megane9988.com/?p=84 えっと、まちがいました。

photoshopキーボードショートカット　Ctrl+Delete　で　レイヤが白く塗りつぶされると書きましたが、
そうではなく、色指定の裏側の色で塗りつぶされるでした。


]]> http://megane9988.com/photoshop%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%ab%e3%83%83%e3%83%88%e3%80%80ctrldelete%e3%81%ae%e4%bf%ae%e6%ad%a3/feed/ 0 http://megane9988.com/photoshop%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%ab%e3%83%83%e3%83%88%e3%80%80ctrldelete%e3%81%ae%e4%bf%ae%e6%ad%a3/ photoshopキーボードショートカット　Ctrl+Delete http://feedproxy.google.com/~r/megane9988/feed/~3/Ik4gZBq3mjI/ http://megane9988.com/photoshop%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%ab%e3%83%83%e3%83%88%e3%80%80ctrldelete/#comments Tue, 31 Mar 2009 10:56:21 +0000 megane http://megane9988.com/?p=82 いま、作業途中に偶然見つけたので、投稿します。

Ctrl+Deleteで、そのレイヤが、カンバスサイズ全面白の塗りつぶしになります。

おお！！

いままでは、元の画像を切ったりしたときに、最背景にレイヤー作って白で塗りつぶしてましたが、
ちょっと早くなりますね！！

うれしかったので、思わず投稿します。

では。


]]> http://megane9988.com/photoshop%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%ab%e3%83%83%e3%83%88%e3%80%80ctrldelete/feed/ 0 http://megane9988.com/photoshop%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%ab%e3%83%83%e3%83%88%e3%80%80ctrldelete/ フォトショップマニュアル1 http://feedproxy.google.com/~r/megane9988/feed/~3/d4gL91EExSY/ http://megane9988.com/%e3%83%95%e3%82%a9%e3%83%88%e3%82%b7%e3%83%a7%e3%83%83%e3%83%97%e3%83%9e%e3%83%8b%e3%83%a5%e3%82%a2%e3%83%ab1/#comments Mon, 08 Dec 2008 05:10:26 +0000 megane http://megane9988.com/?p=78 ■起動　
アイコンをダブルクリック
イロイロ画面に出てきますが
とりあえず待ちます。

■1　とりあえず画像を開いてみる

まずはこの画像をダウンロード

画像の上にカーソルを合わせ右クリック
名づけて画像を保存を選んで、とりあえずデスクトップに保存

フォトショップ上で

Ctrl+O　（開く）
から画像を選択し、開きます。

画像が開きました。

■2　拡大縮小してみる

画像ウインドウの右端にカーソルを持っていくと
ウインドウサイズがドラッグアンドドロップで調整できます
大きくしてみましょう

大きくなりました。

ここで画像を良く見るために、拡大したり縮小したりしてみます。

Ctrl+SPACE　を押すとカーソルが虫眼鏡+　になります。
その状態で画像をクリックすると、クリックするごとに拡大します。

Ctrl+Alt+SPACE　を押すとカーソルが虫眼鏡-　になります。
同様に画像をクリックすると縮小します。

Ctrl+Alt+SPACE　を押した状態で　マウスのコロコロ（真ん中のホイール）
をコロコロ動かすと、拡大したり縮小したりします。

SPACEだけ押すと　カーソルが手のマークになります。
この状態でマウスを使い画像をドラッグすると
画像を動かすことが出来ます。

■3　レイヤーを追加する

フォトショップではレイヤーと呼ばれるものを重ねまくって
絵を描いていきます。

基本的に1つのレイヤーに一つの画像や文字となります。
なので、ホームページのデザインを作る場合はレイヤー数が200以上になったりします。

ではレイヤーを作ります。

Ctrl+Shift+N　で新規レイヤーの追加を行います。
新規レイヤーウインドウではイロイロ設定できそうですが、
とりあえずOKを押します。（実際ほとんどここでの操作はありません。）

レイヤー1という新しいレイヤーが追加されました。

さらに、Ctrl+Shift+N　で、どんどんレイヤーを作っていきましょう
レイヤー4まで出来ました。

■4　レイヤーに■や●を書く

せっかくレイヤーをつくったのでそれぞれに図形を描きます。

まずは図形を描くレイヤーを選択します

レイヤーウィンドウから　レイヤー1を選択

ツールから四角を書くツール（長方形ツール）を選択します。

上の表示はこの形ににして下さい。（ここの詳細はとりあえず省きます）

色を選択します

ここをクリックしてカラーピッカーから好きな色を選びましょう

縦の棒で色合いを決め
四角の中で明るさや彩度を決めます

色を選んだら四角を書きます
どこでもOkなのでマウスをドラッグし、好きな大きさで四角を書きましょう

書けました。

この四角を移動するのには、ツールから矢印ツールを選択します。
上部の自動選択にチェックをつけ、プルダウンから”レイヤー”を選んでおきます

四角をドラッグする事で、好きな位置に移動できます。

他のレイヤーにも図形を書いて見ましょう

レイヤー2を選択します

ツールの長方形ツールを長押しすると
角丸や円、多角形など選択することが出来ます。

角丸を選択しました
色はわかりやすいように青にしました。
角丸の図形が書けます。

同様にレイヤー3に緑の丸
レイヤー4にオレンジの多角形を書きました。

それぞれのレイヤーに表示されてますでしょうか？

レイヤーが分かれていれば、矢印ツールに持ち替えたときに
それぞれの画像が移動できます。

また、画像をクリックするたびに
レイヤーが選択されるのがわかると思います。

画像を消したいときは
矢印で選択して　キーボードでdeleteをクリックします。
画像が消えました。

行った作業を戻したいときは
Ctrl+Alt+z をクリックします。

戻した作業から元に進みたいときは
Ctrl+Shift+Zをクリックします


]]> http://megane9988.com/%e3%83%95%e3%82%a9%e3%83%88%e3%82%b7%e3%83%a7%e3%83%83%e3%83%97%e3%83%9e%e3%83%8b%e3%83%a5%e3%82%a2%e3%83%ab1/feed/ 0 http://megane9988.com/%e3%83%95%e3%82%a9%e3%83%88%e3%82%b7%e3%83%a7%e3%83%83%e3%83%97%e3%83%9e%e3%83%8b%e3%83%a5%e3%82%a2%e3%83%ab1/ フォトショップで書くボタンのチュートリアル http://feedproxy.google.com/~r/megane9988/feed/~3/EdMA5GAWGrE/ http://megane9988.com/%e3%83%95%e3%82%a9%e3%83%88%e3%82%b7%e3%83%a7%e3%83%83%e3%83%97%e3%81%a7%e6%9b%b8%e3%81%8f%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab/#comments Wed, 28 May 2008 13:14:36 +0000 megane http://megane9988.com/?p=76

一般的なボタンの制作です。

角丸の四角に、グラデーションとドロップシャドウをいれます。

文字にもグラデーションとドロップシャドウ

丸にはグラデーションとシャドウでヘッコンだ感じに。

三角はピローエンボスでぼこっとした形にしました。

ポイントはドロップシャドウの数値でしょうか。

距離は１、サイズは３ぐらいで十分だと思います。
ディフォルトの距離５　サイズ５ではぼんやりしてしまうので
このぐらいがミソです。


]]> http://megane9988.com/%e3%83%95%e3%82%a9%e3%83%88%e3%82%b7%e3%83%a7%e3%83%83%e3%83%97%e3%81%a7%e6%9b%b8%e3%81%8f%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab/feed/ 0 http://megane9988.com/%e3%83%95%e3%82%a9%e3%83%88%e3%82%b7%e3%83%a7%e3%83%83%e3%83%97%e3%81%a7%e6%9b%b8%e3%81%8f%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab/ 画像を徐々に透明にするチュートリアル http://feedproxy.google.com/~r/megane9988/feed/~3/-Xl8Qy1jAWo/ http://megane9988.com/%e7%94%bb%e5%83%8f%e3%82%92%e5%be%90%e3%80%85%e3%81%ab%e9%80%8f%e6%98%8e%e3%81%ab%e3%81%99%e3%82%8b%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab/#comments Fri, 22 Feb 2008 07:36:21 +0000 megane http://megane9988.com/?p=72 画像を徐々に透明にして、背景の絵になじませるテクニックです。解説は以下より。

レイヤー上のアイコン上でCtrlを押しながらクリック。
画像の外枠に選択範囲を指定します。

ベクトルマスクを追加するアイコンをクリックし、
マスクをかけます。

レイヤー上にマスクの表示がされたら、
グラデーションツールで透明にする範囲を指定します。

この技法はかなり使いますね。


]]> http://megane9988.com/%e7%94%bb%e5%83%8f%e3%82%92%e5%be%90%e3%80%85%e3%81%ab%e9%80%8f%e6%98%8e%e3%81%ab%e3%81%99%e3%82%8b%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab/feed/ 0 http://megane9988.com/%e7%94%bb%e5%83%8f%e3%82%92%e5%be%90%e3%80%85%e3%81%ab%e9%80%8f%e6%98%8e%e3%81%ab%e3%81%99%e3%82%8b%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab/ WEB デザイン　チュートリアル 1 参考サイトをもとに、カラム割とサイズを決める。 http://feedproxy.google.com/~r/megane9988/feed/~3/pb5hkDY9-Gc/ http://megane9988.com/web-%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%80%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab-1-%e5%8f%82%e8%80%83%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e3%82%82%e3%81%a8%e3%81%ab/#comments Wed, 20 Feb 2008 08:06:08 +0000 megane http://megane9988.com/?p=71

今回から、連続して、WEBサイトの簡単な作り方を順を追って説明していきます。

解説は以下より。

まず第一回は参考サイトを元に、
ガイドを引きまくって、サイズとカラム割を決める
です。

今回は、動画共有サイトのSTAGE6を参考にしました。
http://www.stage6.com/

本当はそれにアップロードする予定でしたが、
DIVXが要るとか、フォーマットが違うとか、割かし面倒だったので
結局、YOUTUBEです。　YOUTUBEなのにSTAGE6というシュールです。。。

まず、”Ctrl+R”でルーラを呼び出します。
外枠に定規が出てきますね。

このときにあらかじめ、
メニューの編集→環境設定→ガイド・グリッド・スライス
ウインドウ内の設定をしましょう

グリッド線→　5pixel
分割数→5

です。
これで、ピクセルに沿ってガイドを動かせますね。

後は、ガイドを引きまくります。
ガイドのところにカーソルを合わせ、ドラッグするとガイドが出てきます。
SHIFTを押しながら動かすことで、1ピクセルつづ動きます。

もし動かない場合は、
メニューのビュー→スナップ
クリックしてチェックマークをつけましょう。
これでSHIFTを押しながら動かすと１PXづつ動くはずです。

あとは、１PXのずれを見逃さないように。
拡大と縮小を繰り返しながら、ガイドを引きます。

拡大はCtrl+Space+クリック
縮小はCtrl+Space+Alt+クリック

です。
拡大縮小とSHIFTを押しながらのガイド引きは非常によく使うので
覚えてしまいましょう。

引き終わったら、
ヘッダ、
メインカラム
サイドカラム
フッタ
に色分けして短形ツールで塗っておきます。

レイヤーごとに分けておいたほうが、後々作業もしやすいです。
新規レイヤーを作るのは
Ctrl+Shift+N
です。

すぐなれると思いますので
何回か、自分の気に入ったサイトをスクリーンショットで
とって、ガイドを引きまくってみましょう。

スクリーンショットをとるときには
ファイヤーフォックスのアドオンがお勧めです。

http://netafull.net/software/014125.html
これ超便利

次回に続きます。


]]> http://megane9988.com/web-%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%80%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab-1-%e5%8f%82%e8%80%83%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e3%82%82%e3%81%a8%e3%81%ab/feed/ 2 http://megane9988.com/web-%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%80%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab-1-%e5%8f%82%e8%80%83%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e3%82%82%e3%81%a8%e3%81%ab/ 鏡面反射チュートリアル http://feedproxy.google.com/~r/megane9988/feed/~3/-mcnIUxWzV4/ http://megane9988.com/%e9%8f%a1%e9%9d%a2%e5%8f%8d%e5%b0%84%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab/#comments Tue, 19 Feb 2008 03:01:45 +0000 megane http://megane9988.com/?p=70

1.背景にグラデーション
2.画像を複製した後、垂直方向に反転
3.マスクをかけた後、グラデーションツールで半分を滑らかに削除
4.不透明率を２０％ぐらいにして透明に
5.上部の画像に90度でドロップシャドウ。

今回、バババッとやっているのでわかりにくいかもしれません。
詳しくは、またかきます。
ひとまずyoutubeからチュートリアルをアップさせたかったので。

今後、画質やら、音声やら
詳しい解説やらをアップしていきますね。


]]> http://megane9988.com/%e9%8f%a1%e9%9d%a2%e5%8f%8d%e5%b0%84%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab/feed/ 0 http://megane9988.com/%e9%8f%a1%e9%9d%a2%e5%8f%8d%e5%b0%84%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab/ メガネブックマーク http://feedproxy.google.com/~r/megane9988/feed/~3/3RjcX2OPAwE/ http://megane9988.com/%e3%83%a1%e3%82%ac%e3%83%8d%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/#comments Wed, 13 Feb 2008 14:50:01 +0000 megane http://megane9988.com/?p=60 このカテゴリは、毎日のなかで気になったサイトを羅列てきにピックアップ

1.バレンタインのチュートリアル
http://feeds.feedburner.com/~r/psdtuts/~3/234197891/

なかなかカワイイのはいいのですが、まず文字を３Dにするソフトがないっす。。orz

2.やたら高画質な動画共有サイト
これ、テレビいらんやん！的な衝撃

STAGE6
http://www.stage6.com/

ZOOME
http://www.zoome.jp/

あ、せっかくなのでエロも（１８禁）
http://www.redtube.com/new

3.無料で使えるPhotoshopレイヤースタイル
このサイトにはどれだけお世話になっているか。。
http://www.designwalker.com/2008/02/layer-styles.html

以上。
まだまだありそうだけど。
あまり長いと、よめないっすよね。

うん。


]]> http://megane9988.com/%e3%83%a1%e3%82%ac%e3%83%8d%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/feed/ 0 http://megane9988.com/%e3%83%a1%e3%82%ac%e3%83%8d%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/ ６から７になるそうですが、、、 http://feedproxy.google.com/~r/megane9988/feed/~3/yOp9ER5Eysk/ http://megane9988.com/%ef%bc%96%e3%81%8b%e3%82%89%ef%bc%97%e3%81%ab%e3%81%aa%e3%82%8b%e3%81%9d%e3%81%86%e3%81%a7%e3%81%99%e3%81%8c%e3%80%81%e3%80%81%e3%80%81/#comments Wed, 13 Feb 2008 14:38:44 +0000 megane http://megane9988.com/?p=59 IE7.0の自動アップデート始まる。
http://web-tan.forum.impressrd.jp/n/2008/02/13/2647

６と７で表示のされ方が微妙に違うので、
一緒に制作しているチームで、６と７のPCを使い検証してるんだけど。
僕の６が入っているPCはそのまま本日アップデートされました。

話では、自分で操作しないと７にならないとかどうとか。
なので、大丈夫かな？と思ってますけど
明日会社に行ってみてどうなりますことやら。

すでに８も制作されてるということで、
なんでもいいのだが、みんなサファリに統一してCSSについて悩むことの無い
インターネット環境にはならないものだろうか。。。

まあ期待はしませんが。

ギガジンさんではこちら


]]> http://megane9988.com/%ef%bc%96%e3%81%8b%e3%82%89%ef%bc%97%e3%81%ab%e3%81%aa%e3%82%8b%e3%81%9d%e3%81%86%e3%81%a7%e3%81%99%e3%81%8c%e3%80%81%e3%80%81%e3%80%81/feed/ 0 http://megane9988.com/%ef%bc%96%e3%81%8b%e3%82%89%ef%bc%97%e3%81%ab%e3%81%aa%e3%82%8b%e3%81%9d%e3%81%86%e3%81%a7%e3%81%99%e3%81%8c%e3%80%81%e3%80%81%e3%80%81/