よら’s atelier

[ウェブデザイン] カテゴリの記事

全17件 (17件中 1-17件目)

1

• 

  Chrome隠しコマンド

  IE9が正式リリースしましたが、どのぐらいの人が入れてるんでしょうか？まだ私は入れてないですが、windows7のノートPCには入れてみようかなとも思ってます。どのみちメインブラウザはChromeとFirefoxなんですがｗそんなGoogleChromeの隠しコマンドなるものを有名な百式さんが紹介していたのでメモがてら便乗します。Firefoxでは「about:config」ですが、Chromeでは「about:flags」とurl欄に入力します。すると上記のような画面になります。危険なマークが出ていますが、実験段階のものですよという意味です。この中で百式さんは「3本指スワイプがお気に入り」と語っておられました。この機能を使うとタブの一覧がサムネイルで見れるようになるみたいです。画像を拝借。Chromeの売りは速度ですが、次の機能を有効化しているとかなり爆速になるみたいです。「GPUアクセラレート合成」と「ウェブページの事前レンダリング」の二つ。真偽の程は確認してないので自己責任でお願いします。

  2011.03.22

  コメント(2)

• 

  Naverまとめ yora

  お久しぶりです、よらです。最近ウェブデザインやテクニックに関する記事やIT系、海老蔵系ニュースにアンテナを張って過ごしています。記事は毎日上がってくるし、素晴らしい技術の紹介もどんどん出てきて正直自分の勉強が追いつかない！ｗどこかにメモせねば！と始めた「Naverまとめ」。現在はまとめを二つ作っていて、一つはクールなデザインの名刺・ビジネスカード関連リンクのまとめ。もう一つは、Web系技術の紹介やアイコン、写真の素材集、インスピレーションを与えてくれる素晴らしい発想のアート集などをまとめています。自分のためにと思い作り始めたものが同じ情報を求める人の役にも立てたら嬉しいですね～。今後も更新していく予定なので良かったら見に来てやってください＾＾【追伸】先日、ついに寝室兼私の部屋にライトというものが実装されました。引っ越して8カ月・・・これからは暗闇でのディスプレイの明かりに怯え、サングラスをかけることがなくなります。なんと素晴らしいことか！最高にハイってやつですよ！

  2010.12.07

  コメント(0)

• Firefoxアドオン　BarTab

  Firefoxスキーの方はどういうところでFirefoxを選ばれているんでしょう。1、ずっとIE使ってたけど遅すぎﾜﾛﾀから2、なんか皆使ってるから3、アドオンが多くて魅力的4、デザインが豊富5、Javascriptに対する動きが快適6、ロゴが好き7、安定してるから色々あると思いますが、私の場合は3のアドオンです。便利なアドオンがたくさんあり、簡単に使えます。デザインとかはデフォルトスキーなのでどのソフトを使っても基本標準のままです。さて、最近私はひとつの深刻な問題に直面しています。それはFirefox使いな皆さんが、普段から好意的に接しているFirefoxにメモリを食い尽くされてしまっていないか。Firefoxを立ち上げる際に、いちいちまた全てのタブを再読み込みするのに時間がかかるからって、Firefoxにキツくあたっていませんか？その事が毎晩とても心配で夜も眠れません。でも大丈夫、Firefoxならね！賢いブラウザなのでこういうアドオンを用意しています。BarTabこのアドオンは複数タブを開いていても、不要なタブはお休みさせておけるというものです。使い方は簡単で、タブの上で右クリック。表示されるコンテクストメニューからタブを待機させるを選択するだけ。これでタブタブしている状態でも必要なタブだけアクティブにでき、不要なメモリを消費しません。ブラウザの再起動も軽快になるし、ブラウザを開きながら作業する機会は多々あるので助かります。これでまたFirefox無双間違いなしｂ

  2010.09.30

  コメント(0)

• 

  IE9のHTML対応状況

  こんにちは、肉厚先生ことよらです。こんな記事を教えてもらいました。IEェ…βだからだよね！？まだ作ってる途中だからだよね！！？？さらにIE9はXP以下のwindowsのサポートは無し。まだまだXPユーザーが多い中強硬姿勢です。某官房長官なら「マイクロソフト社がIE9を発表していらっしゃるが、XPユーザーを排除しているとは断定できない」と言うかもしれませんが。IE6-8を使っている方は『Google Chrome Frame』というChromeの技術でIEをHTML5に対応させたりパフォーマンスを向上するアドオンもあるので試してみてはいかがでしょう。

  2010.09.29

  コメント(2)

• 

  プログラミン

  こんにちは、肉厚先生ことよらです。今日も名古屋は暑苦しいですね！現在デザイン業務などほぼ皆無の中せこせことVBを使ってプログラミングをしているんですが、独学だと本当に難しいですね；；私の目指すところは『プログラミング "も" できるデザイナー』なのですが、このままの路線でいくと『ちょっとデザインも出来るプログラマーもどき』になりそうで怖い・・・。出来ないより出来る方が絶対良いんですけどね。それに費やす分時間であったり労力であったり何かしら代償が必要なので、何も考えずレールの上に乗りっぱではいかん！と私のゴーストが囁くのです。しかし初心者は私だけではないはず！これからプログラミングを始めようという人はこんな楽しいサイトもあるので試してみましょうｂhttp://www.mext.go.jp/programin/ツイッターでも少し話題になっている『プログラミン』です。ハッシュタグは『#programin』。既にこんなのも作られてる偉い人も居ます。良きファミコン時代を彷彿とさせる逸品。可愛いのに難しいｗｗ今は別のものに着手しているので、そのうちプログラミンでも何か作れたらな～と思ってますｗ

  2010.08.20

  コメント(0)

• 

  Photoshopブラシセット～煙、炎～

  こんばんは。以前にもPhotoshop用ブラシライブラリをご紹介しましたが、今回は『煙、炎』のブラシをご紹介。良いモノはみんなで共有しましょう。例によって海外サイトですが、本物そっくりの煙と炎を演出するブラシライブラリ無料配布http://photoshopvip.net/archives/17132たくさんあります。このサイトの画像をクリックするとダウンロードできる本家に行くので、そのページの右隅にあるDownloadをクリックして落としてきてください。さっそく落としてきたブラシファイルを使ってみました。2次配布は逮捕だぁぁあ～。自力で作るとなるとなかなか大変な作業だし、ほんとこういうの作ってくれてる人には感謝感謝ｗその他のブラシファイルもかなり沢山あるので色々探してみてはいかがでしょうか？

  2010.08.03

  コメント(2)

• セカイカメラ新ヴィジョン プレス向け発表会

  ロマンティックよりもwktkが止まらないｗ先ほどケツダンポトフのダダ漏れで『セカイカメラ新ビジョン　プレス向け発表会』がダダ漏れされてたわけですが、思いっきり平日の昼間なので仕事中に視聴するわけにもいかず・・・お仕事しながらTwitterのTLを眺めていただけなんですが、もうなんか凄そうですよｗｗケツダンポトフのそらのさんがTweetしてくれる内容しか把握できてないですが、こんな事をつぶやいてくれてました。（一部抜粋＆編集）******************************************・セカイカメラアップデートでUIの見直し！↓たぶんこの辺からデモを見ながら・世界中に爆弾が設置されてるｗ・セカイユウシャ!!!・世界初　拡張現実オンラインRPG？・これは、冒険に行きたくなる！　冒険の旅にでたい！・街中にモンスターやお宝!?・みんなで岐阜にある封印を解きに行くとか！ ワクワク!・確かに18切符は大活躍かも！・リアルなお宿と連携希望!!・「全国５０５カ所に勇者が集まる酒場があります(ｷﾘｯ」　ワクワクが止まらない！・露店ーッ!!!　リアル地価を反映なんてwww」・ジョブチェンジきた！　実際の職安に転職場所を配置ってwww・どういうフィルターでみるかでセカイがかわる！******************************************リアルとネトゲの境界線がどんどん曖昧になっていく！！ﾜｸﾃｶが止まらないｗｗネトゲ廃人も外へ出る時代か！？まずやることは、りむの家のタンスとかツボとかを勝手に調べる事かな？勇者ですから(ｷﾘｯイベントなどのエンディングは当然マルチエンディングで、・事故で意識を失って寝たきり状態の彼女の妹に手を出して妊娠させる妹エンド。・公園のトイレの前のベンチに座っている男性にホイホイされちゃうくそみそエンド。・「・・・・・・い」「・・・お・・・さい」「起きなさいって言ってるでしょ！」夢落ちエンド。・夢を追いかけて上京したけど、東京の風が冷たくて夢を諦めて帰郷すると、駅のホームでよく知っている顔がこちらを見てニコッと笑った幼なじみエンド。・拡張現実世界でスマートフォン持って、拡張現実世界内からセカイカメラを使ってさらに奥の拡張現実世界にダイブし、さらにその中の拡張現実世界で・・・・・・・無限ループエンド。あたりが基本になるのは容易に想像できますね。ちょっとジュイスにTelしてくるﾉｼしかし、本当に現実と仮想現実世界を一緒にしておかしな行動に出る人も居そうで怖いですね。特にRPGとかだと武器を持つんで、そういう破壊衝動を煽りやすいし。個人的には物凄くやりたいですけどねｗラブプラス的な方向は更にユーザー満足度が上がる事うけあい。ラブプラス廃人にならない様に気をつけましょうｗその前に携帯をスマートフォンにしないと。iPhoneにするかアンドロイドにするか。iPhone、Xperia、HTC Desire、IS01いろいろあるけど・・・う～ん。Flashは欲しいのでアンドロイドにするか、動きの滑らかさ・Webページにアクセスした時に自動的にページ全体を見えるサイズに縮小してくれるiPhoneか・・・。今日も悩みます。。。

  2010.07.30

  コメント(2)

• 

  CSS Nite in OSAKA

  めっちゃ行きたい・・・がちょっと遠い；；名古屋で土日なら間違いなく行くのに！！概要はこんな感じです↓↓*********************************************イベント概要次世代デバイスとして登場以来脚光を浴び続けているiPhone、そしてiPad。それらで動作する数々のアプリはどのように企画され、どのように制作されているのか。Web制作者としてはどう関わっていくべきなのか。それらの疑問をこの夏に解消してしまおうと緊急企画したCSS Nite in OSAKA, Vol.21、CSS Nite in OSAKA, Vol.22、そしてこのVol.23のiPhone／iPad特集も、いよいよファイナル！今回は様々な立場でアプリを開発されている方々に登壇いただきます。また、Webの知識があるからこそ作れるアプリということで、HTML5-WEST.JPから、HTML5を使ったアプリもご紹介。さらに、iOSの対抗馬であるAndroidのユーザーコミュニティ「日本Androidの会」からもゲストをお招きしました。多様な切り口からスマートフォンアプリの世界を覗いてみましょう！*********************************************CSS Nite in OSAKA, Vol.23～iPhone/iPadアプリ制作特集～シリーズファイナルhttp://osaka.cssnite.jp/vol23/Twitterハッシュタグは 「#cnio23」です。 Ustで放送希望！！

  2010.07.28

  コメント(2)

• レンズフレア素材

  デザイナーの方なら一度は使った事があるかもしれないレンズフレア。天気の良い日にカメラで撮影したりする際に日光の反射が写真に写り込んでしまうアレですね。Photoshopなどでもデフォルトで用意されていたりするんですが、パターンが決まっているので何度も使っていると物足りなくなってきます。やはりリアルなものを使いたい！でもポスターなど高解像度のものを作るとなると、ググって出てくるようなものではサイズが足らない・・・。そんな方に必見！！3500×3500pxという高解像度で撮影されているレンズフレアのテクスチャが15枚セットで無料配布されている海外デザインブログ『Think Design』のご紹介。Coolなフレアが高解像度で収録されているので、試してみてはいかがでしょうか？・・・・・というのをAdobe Store 店長さんが紹介していたのでRT的にブログでご紹介ｗ思いっきり人のフンドシで書いたブログだ！

  2010.07.13

  コメント(0)

• 

  WDC開催

  ドメインとダメオンって似てるよね？？こんにちは。投票はこちら↓http://www.worlddomaincup.com/japanese/index.htmlWDC、WBC、TDL、USJ、orz、wktk、ksk、jk、sneg、mk5、チョベリバ・・・何だか似たような略語が飛び交っていますがそれはとても些細な事で、そんな事よりもWDC（ワールドドメインカップ）が現在開催されています。WDCとは株式会社インターリンクが主催した新規gTLD（トップレベルドメイン）名の応募大会です。gTLD（トップレベルドメイン）とは『.com』『.jp』『.net』などドメインネームの最後に付く部分で、2010年よりgTLD（トップレベルドメイン）が自由化されることが決定したのです。なので今後は、「.社名(.interlink)」や「.人名(.obama)」、「地名(.tokyo)」などの名前が申請できるようになりました。しかし！！申請費用は数千万円！！ムリポ。WDCとはそんな価値のあるgTLD（トップレベルドメイン）の名前を募集し、投票により優勝者が選ばれ、優勝したドメイン名をインターリンクが申請し、その売り上げの一部（ドメインが１つ売れる度に＄1）が貰える仕組みになっています。もし、.comと同じぐらい世界で使用されれば、なんと毎年8000万ドル（約80億円）を10年間受取る権利になります！うはｗｗｗこれで勝つるｗｗｗｗｗｗｗドリームジャンボとミリオンドリームは何かの間違いで300円ずつしか当たらなかったけど、これは勝つるｗｗｗｗｗ・・・と思った時が僕にもありました。どうも応募期間は終わっていて既に最終審査段階。投票により優勝者を決める段階になっています。が、投票に参加するだけでも抽選でiPad Wi-Fi 16Gモデルやオタクランチをゲットできるみたいです。ちなみに私が投票した時点のリアルタイム状況はこんな感じでした。『.earth』が人気ですね～。グローバルな感じがするからかな？環境問題やエコに重点を置いたサイトとかに良さそうですねｗすぐに投票できるので、オタクランチがどうしても欲しいという人は投票してみるのもいいでしょう。投票はこちら↓http://www.worlddomaincup.com/japanese/index.html

  2010.06.17

  コメント(0)

• Adobe CS Live

  こんにちは。肉厚先生ことよらです。少し前の話ですが、アドビシステムズ社ホームページに『Adobe CS Live』なるサービスが追加されました。 アドビ CS Liveのページ 『Adobe CS Live』とはAdobe BrowserLab、Acrobat.com、SiteCatalyst NetAverages、Adobe CS Review、Adobe Story（ベータ版）と言った便利な各種サービスを統合したオンラインサービスの事です。 ウェブデベロッパーには有りがたい機能が揃っていて、私の場合BrowserLabにお世話になったことが何度かありました。 Adobe BrowserLabとは指定したurlのページを複数のブラウザでチェックできるクロスブラウザチェックシステムです。ブラウザのバージョン、OS（Mac or Windows）をも跨いで確認できる優れものです。 ホームページ制作、ウェブシステム開発を行う上でデベロッパーを悩ませる原因の一つがブラウザ問題。たくさんのブラウザが世の中に普及しており、それぞれの仕様の違い、html、css等の対応の違いで表示のされ方が違ってくるという問題です。製作者は各ブラウザを意識して、なるべく全てのブラウザで同じ表現ができるように組んでいくべきなのですが、これがなかなか難しい！ また、一時期はWindowsのIEがシェアの大半を占めていたブラウザ競争ですが、最近ではIEのシェアが落ち気味でFirefoxやGoogle Chrome、Operaなど他ブラウザが勢いを増し、シェアの分散が起きています。 ということは、今まで以上に気を付けていかなければなりません。 同じブランドのブラウザでもバージョンの違いにより全く別物として扱う必要がある上、同じバージョンの同じブラウザでもMacとWindowsではアンチエイリアスの関係などで表示のされ方が違ったり・・・。 このような表示の違いを一元管理でチェックできるのがAdobe BrowserLabなのです。 特に凄いのがwindowsしか持っていないユーザーでもMac版のブラウザチェックを行える点です。これは有りがたい＾＾ ここまでの説明では完璧に聞こえるAdobe BrowserLabですが、いくつか問題点もあります。 まず、スクリーンショットでの確認になるので、Flashや動画などの動きまではチェックできない。 その辺のチェックは必須なので、このあたりはちょっと痒いです。 もうひとつは文字化けの問題。 実際にホームページに上がっているものを実際のブラウザで見た場合に、普通にフォントが適用され問題なく表示されているページでも、Adobe BrowserLabで確認すると思いっきり文字化けしていたりします。本気で少し不安になります＾＾； 逆にAdobe BrowserLabで文字が普通に見えているページでも、実際に上がっているものを実際のブラウザで確認すると文字化けしていたりする場合もあるようです。 さすがにこれはガクプルしてしまいますね。 なので、このシステムに頼り切りにはならないで、段組みのズレ、カラム落ち等レイアウト部分のみのチェックぐらいに留めておくべきなのかもしれませんね。前バージョンのブラウザだとレイアウト的なズレが激しく目立つので、前バージョンのブラウザチェックにも使えると思います。しかし、可能な限り実際のブラウザで確認するべきなので、出来ればwindows、Mac両方体制+旧バージョンブラウザが入っているPCというフル装備で挑みましょう。 ・・・・・・・結構ハードル高い・・・・。

  2010.06.16

  コメント(1)

• 

  画像のフォント検索

  アドビストア店長さんからの情報～。********************************画像に使用されているフォントの名前やそれがダウンロードできるリンク先が分かるオンラインサービスを紹介します。利用の際に登録は必要なく、3ステップで簡単にできます。********************************『What font is』というサービスです。http://am6.jp/9bk9Tfデザイン業務を行っているとあのフォント何使ってるんだろ？とか、「これと同じフォント使ってくれ」とか言われて数あるフォントファミリーから探すのかよ！！となることもあると思います。そんな時に役に立つサービス。1.8MB以下の画像をうｐ、もしくはurlを入力して。今回は適当に作ったこんな画像を使ってみます。さらにフリーフォントのみ表示、商用フォントのみ表示、どちらも表示を選んで進みます。と・・・・・・・いっぱいエラーが出ました。なぜだ！とりあえず一個ずつみていきます。1、- The text must be horizontal;テキストを水平にしろと。2、- The letters must not be touching;文章に余計な事をするなよと。3、- The resolution for the letter must be over 80 pixels for best results;80px数以上の画像を使えと。4、- The background color must be lighter than the characters color;背景色は文字色より明るくしろと。5、- Maxim number of characters is 10;最大文字数は10文字ですよ、と。6、- Minim number of characters is 2;最小文字数は2文字ですよ、と。7、- Try to make the image Grayscale;グレースケールにして試してみろと。8、- Best resolution 1000px X 120px;1000px × 120pxがベストですよ、と。原因として考えられるのは『2』『5』。柄と文字がかぶってるのが有力かな？10文字オーバーなのでこれもアウトｗあと、二種類のフォントを使っているのでどちらかにすべきかも。こちらが修正画像。ではレッツチャレンジ！進んだ！検知したフォントらしき部分を切り分けて表示しているようです。しかし、最後の『w』が切れて分かれてしまっています。そこでここの上部に書かれている注意文。Check every image and input the black character in the image. Please leave the box empty if the character is not valid or if there are more than one character in the image.If you can't see the letters try to auto equalize the image.If the letter is split in several images, drag one image over another to combine the shapes.*要するにここに表示されている画像にあった文字を四角いテキストボックス内に入力してくれと言う事です。また、表示している画像が文字として有効でないなら、表示している画像を他の画像の上にドラッグ＆ドロップして画像を合わせてくれということみたいです。そこで『w』の切れている画像に最後の斜線っぽい画像をドラッグ＆ドロップしてみたら合体した！合体したところでテキストボックスにwと入力します。『p』ならテキストボックスにpを入力していきます。1文字ずつしか入力できないので、1文字ずつに切り分けて入力するのかと思いきや分け方が分からないので、とりあえず『p』『N』『o』『w』を入力して進めます。すると候補が100個ほど出てきて、それぞれダウンロードできるサイトにリンクがされています。今回の『EspressoNow』に使ったフォントは『Georgia』でした。コーヒーだけにな！！しかし、候補にはGeorgiaの存在がない・・・・。私が『Roots』派だからかもしれません。使うも使わないも個人の自由ですが、興味があったら試してみるのもいいかもというサイト紹介でしたｗ～追伸～よく考えたら『EspressoNow』で11文字だったけど、最後の文字入力のところで10個までしか入力しなければ大丈夫そうですね。

  2010.06.14

  コメント(0)

• Ustream - CS5セミナー

  今日のUstream情報～。【CS5 Seminar「Flash CatalystとFlash Builderで作るTwitterアプリ】Ustream動画です。昨日開催したCS5 Seminar「Flash CatalystとFlash Builderで作るTwitterアプリ」の録画版は、こちらでご覧いただけます。http://bit.ly/ust5_0610 #CS5_jp #station5CS5ほすぃ・・・

  2010.06.11

  コメント(0)

• 

  CSS sprite

  ブログやホームページを作る際、多くのページで画像を使われると思います。使い方も様々で、そのままベタ置きしたり、ボタンとして使ったり、背景として使ったり。しかし、文字と違って容量が大きいので使いすぎるとページ自体が重くなり、PCスペックによってはそのページの描画にえらく時間が掛かりかねません。一般的に7秒を越えると、ほとんどの人がストレスを感じると言われています。ガチガチのユーザーはもっと短くなるでしょう。なのでウェブページの表示は少しでも早く、少しでも軽快にすることが大事になってきます。では、どうやって早く表示させるようにするか。方法はいろいろとあります。原因がいろいろなので当然ですね。その原因の中で、「画像の数が多すぎる」場合のテクニックを一つ紹介します。【CSS sprite】例えば上記のようなボタンをホームページに組み込みたい時、＜ul＞＜li＞＜a href="akasan.html"＞＜img src="image/akasan_off.jpg" /＞＜/a＞＜/li＞＜li＞＜a href="abesan.html"＞＜img src="image/abesan_off.jpg" /＞＜/a＞＜/li＞＜/ul＞としたとします。その場合は画像が二つ必要になります。ボタンの数が増えれば増えるほど必要な画像の数は多くなりますね。また、カーソルがボタンにロールオーバーした際に画像をチェンジさせたい場合は、その分画像を用意する必要があり、画像の数は単純計算で二倍になります。画面の表示速度に関して、当然使っている画像の『重さ』も要因になってはきますが、画像の『数』というのも大きく影響してくるということが分かっています。そこで『CSS sprite』の出番です。この『CSS sprite』というテクニックを使えば画像を1枚読み込ませれば良いだけなので、画像の総容量が同じでも結果的に表示速度の向上が期待できるのです。では、実際の使い方です。まずCSSの指定から。幅200px高さ70pxのメニューボタンをリストで並べて配置します。/***** CSS側記述 *****/ul#global_navi{width:400px;height:auto;margin:0;padding:0;list-style:none;}ul#global_navi li{margin:0;padding:0;width:200px;height:70px;line-height:0;float:left;}ul#global_navi li a{display:block;margin:0;padding:0;width:200px;height:70px;background-image:url(image/global_navi.jpg);}/*背景画像の開始位置の指定*/a#menu01{background-position:0px 0px;}a#menu02{background-position:-200px 0px;}/*ロールオーバー時の背景画像開始位置の指定*/a:hover#menu01{background-position:0px -70px;}a:hover#menu02{background-position:-200px -70px;}少し特殊ですが、aタグの背景に画像を指定しています。使用する画像はこの一枚。この一枚を使って二つのメニューボタンを表現します。aタグの座標指定の部分が分かりにくいでしょうか。ボタンのサイズはドロップシャドウ分を考慮して一つを200×70pxにしてます。背景として画像を指定すると、通常は画像の左上から表示されます。左上部分の座標は（0,0）です。背景画像を表示する要素（今回の場合はリスト内のa）のサイズを今回は幅200px、高さ70pxとしているので、その範囲の背景画像しか表示されません（左上のあかさんボタンのみ）。そのままだとボタンが全て同じ画像になってしまうので、CSSで背景画像の位置をずらしてやります。/*背景画像の開始位置の指定*/a#menu01{background-position:0px 0px;}a#menu02{background-position:-200px 0px;}background-positionの中は、左側がX座標、右側がY座標です。menu01は通常どおり背景画像を表示させてあかさんボタンを表示させています。次に、menu02ですが、X座標を-200pxにしてあります。これは「背景画像を左側へ200pxずらした位置から開始させますよ」という指定です。同じ背景画像を左に200pxずらしたイメージです。開始点というのは背景画像を表示させる要素（今回の場合はリスト内のa）の開始点（左上）のことで、そこに合うように背景画像をずらしたわけです。このように座標指定をそれぞれのメニューボタンにしてやることで、メニューの数が増えても一枚の画像で多数のボタンを表現できます。さらに、a:hover#menu01{background-position:0px -70px;}a:hover#menu02{background-position:-200px -70px;}でマウスをロールオーバーした時の背景画像の位置をずらすことで、ロールオーバー時の画像へ切り替える事も可能です。html側の記述は先ほどと同じようにリストで記述をします。別にリストじゃなくても構わないのですが、グループとして分かりやすいので管理が楽です。＜！--html側記述--＞＜ul id="global_navi"＞＜li＞＜a href="akasan.html"　id="menu01"＞＜/a＞＜/li＞＜li＞＜a href="abesan.html"　id="menu02"＞＜/a＞＜/li＞＜/ul＞これで通常時は上段の二つの画像がメニューボタンとして表示され、マウスを乗せると下段画像に変わります。本来なら4枚画像を用意しなければならないところを1枚の画像で済むので管理も楽になりますね。CSSの指定の仕方は色々ありますが、自分で管理しやすく、他人が見ても把握しやすい記述をしましょうｂちなみに、スプライトの実用例。実はgoogleでも気づかぬところで当たり前のように使用しています。適当に検索するとこんなページが現れますよね？ここに使われているgoogleロゴのボタン。実はこれ・・・・・こんな画像を使っています。狭い領域にびっしりと色々な画像が詰め込まれていて、初めて見た時はビックリしましたｗ

  2010.02.16

  コメント(2)

• 

  fireworksで保存できない！時の対処法

  しばらくデザインのお仕事をしていると、同じように見える画像処理ソフトでもそれぞれ作るもの、媒体によって使い分けをしたくなってきます。私が主に使っているソフトは・・・・・・・Photoshop・Illustrator・Fireworks・Flash・giam（たまに）辺りです。では、各ソフトの説明を。■PhotoshopAdobe社の代表的な高性能画像処理ソフト。2010年1月現在の最新バージョンはCS4。Adobe社がMacromedia社を買収して、CS3からそれぞれの代表ソフトの連携がより一層取りやすくなってます。Photoshopと言う名前からも分かるように、写真データを加工したりする時はかなり重宝します。ホクロを消したり、モザイクを掛けたり、モザイクを掛けたり・・・■IllustratorこちらもAdobe社の代表的なイラスト作成ソフト。レイアウトソフトとしても使えます。Photoshopとの基本的な違いは扱うデータがベクトルデータなのかビットマップデータなのかです。イラレはベクトルデータなので画像を拡大・縮小しても基本的にデータの劣化が起こりません。なので、ロゴ制作等色んなサイズで使われるものを作る際に活躍します。■Fireworks元Macromedia社製の画像処理ソフト。ほぼweb制作用です。同社製のFlashとの連携が取りやすいです。また、web制作をしたことのある方なら実感があると思いますが、1pxに泣かされる時も多々あります。FireworksはPhotoshopよりもピクセル単位での作業がしやすく、またグラデーションの細かな配置も出来るので、使い慣れるととても楽しいソフトです。しかしモザイクが掛けられないのが残念＞＜■Flashこちらも元Macromedia社製のソフト。今では大きいHPならたいていどこを見ても使われている「Flashムービー」を作るソフトです。しかし一般的になってきたとは言え、第三者がそのムービーを見るためには「Flashプレイヤー」をダウンロードしてこないと見れないので、使う使わないは管理者の判断になります。Flashで作れるものは実はとても幅広くて、エンドレス垂れ流しのムービーだけでなく、有名所では「ニコニコ動画」のコメントが流れていくプレイヤー等、ユーザーのアクションに反応するものも作れます。■giam古溝 剛さん作のアニメーションgif作成ソフト。フリーソフトです。Flashの登場で使う機会が減ってしまったアニメーションgifですが、ちょっとしたものや、あえてのアニメーションgifで、という機会に使ってます。一枚一枚の画像表示のタイミングや順番も楽に変更出来て使いやすいです。と、長々と書いてきましたが本題は説明ではなく、Fireworksの作業中にこんなエラーが出て、保存すら出来なくなると焦りますよね？こういう時の対処法の紹介です。メモリの圧迫が原因の場合のみ有効な方法ですが、試してみる価値はあると思います。まず「ヒストリパネル」→「オプションメニュー」を開きます。次に、赤い部分で示した「ヒストリをクリア」をクリックして、ヒストリを消去してみてください。これで割と解決できたりします。私の経験上ですがFireworks CS4をwindows7で使っていてこの現象が出た際、何度も繰り返し保存を実行しているとそのうち保存出来たりします。また、jpg等の以前の画像ファイルにfireworks CS4から同じ名前で上書き保存をしようとした際に、同様のエラーが出て保存できなかった場合がありました。その際は上書きされるはずだった以前のファイルが消えてなくなる現象が何度もありました。Fireworks側のバグなのかwindows7との相性なのか分かりませんが、危険なので別名保存しましょう。原因、解決法など分かる方居ましたらコメントお願いします＞＜

  2010.01.27

  コメント(2)

• photoshop、illustratorのサムネイルが表示されない！

  スクリーンショットの加工やデザイン業務などをしていると、いつの間にかファイルがたくさん出来てしまってどれがどれやら『わけワカメ！』な経験のある方も多いのではないでしょうか。XPの縮小表示などでサムネイルを表示すれば、視覚的にどれがどれかを理解できるので便利ですねｗしかし、photoshop、illustratorを新しいバージョンに変えて喜んでいると、なぜかサムネイル表示がされない・・・という現象が起きたりします。そんな場合、http://www.aeonity.com/david/adobe-photoshop-cs2-thumbnails-psd-file-in-windows-explorer上記のサイトからPhotoshop(.psd)ファイルとIllustrator (.ai) ファイルのサムネイルを表示してくれるdllをもらってきましょう。http://blogs.yahoo.co.jp/mithrilblog/50949700.htmlさんに感謝！***************以下引用**********************■インストール方法1）リンク先の"1. Download this file to a temporary folder."というコメントのリンクから　aiicon.zipをダウンロードします。2）解凍すると、aiicon.dll、aiicon.dll.reg、psicon.dll、psicon.dll.reg、readme.txtという5つのファイルがあります。　この内、aiicon.dll、aiicon.dll.regは.aiファイルのサムネイル表示に使うファイル。　psicon.dll、psicon.dll.regは、.psdファイルのサムネイル表示に使うファイルです。※以前紹介した記事でPSDファイルのサムネイル表示が出来ている人は、既にpsicon.dllが入っていますので、aiicon.dll、aiicon.dll.regだけ使います。3）aiicon.dll、aiicon.dll.regファイルをC:\Program Files\Common Files\Adobe\Shellフォルダに入れます。　※Shellフォルダが無い場合は新規に作ってください。4）aiicon.dll.regを右クリックして結合を選びます。　※readme.txtにも書いてありますが、レジストリを書き換えるので自己責任で。　　念のためレジストリのバックアップや、システムの復元ポイントの設定等しておくと良いでしょう。結合後はaiicon.dll.regファイルは削除して構いません。以上。PSDの方も同様の手順でOKです。***************引用終り**********************windowsXPでCS2使用時はしっかりと表示されているのを確認済みです。windows7では.aiのサムネイル表示が上手くいってません・・・。使用する方は自己責任でお願いしますね～。

  2010.01.22

  コメント(2)

• 赤石引退～ブログ方向転換

  ものすごくお久しぶりな気がします。ブログを書き始めて早数年。REDSTONEと共に歩み成長してきたブログも、リアルの生活習慣による赤石離れに伴って気づけば放置ブログに・・・ｗそして今年の頭に何度目かの赤鯖東西戦に東軍として参加させてもらったのを最後に、赤石を引退することにしました。まぁ長いことよくやったなとｗ始めた頃はまだ大学生？大学院生？だったはず。当時はほぼ廃人でしたねｗｗで、最後のGvである東西戦のためにINしてみると、後腐れが無いようにとのゲームオンさんからの温かいお気遣いなのかしっかり垢ハックくらってましたｗｗｗっうぇｗｗｗ年末は自分の装備でGv出れたのに、最後のGvは1時間で集めた借り物装備。東軍の皆さん申し訳ない！ｗ結果は敗北でしたが、最後にふさわしい熱い戦いでした。新旧赤石プレイヤーの皆さん、長い間ありがとうございました。ということで、原点回帰。当ブログの最初の目的に戻って、まぁ完全に同じじゃないけども、ウェブデザインやflash、photoshop、Illustrator等の小ネタについてのブログへと華麗に変貌を遂げることにします。主な目的は自分自身のメモとしてです。ではでは、またいつか～ﾉｼ

  2010.01.21

  コメント(3)

全17件 (17件中 1-17件目)

1