『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
写真素材を使用せずに、紙、メタル、カーボン、布、レザー、草などのテクスチャを作成するPhotoshopのチュートリアルを紹介します。
なかなか用途がありそうでした のでメモ。Lightboxでよく見る ように周りを暗くして画像をハイ ライトさせながら、ルーペ機能 も実装するjQueryプラグインの ご紹介。 IE6と7でも動作確認しましたが、何の問題も無く動いてくれました。マークアップも凄く単純なので使い勝手も良さそうです。 こんな感じで画像をハイライトさせつつ、拡大鏡も実装します。 マークアップは以下のような単純なコードで実装出来ます。 <a href="images/big/belle_isle_big.jpg" class="one"> <img src="images/small/belle_isle_small.jpg" alt="belle isle" /> </a> 小さい画像をアンカータグで囲ってリンク先を大きい画像のURLにするだけ。 jquery.loupeAndLightbox.jsを使いつつ、以下
SEO的にも問題の無い縦書きのコンテンツを作りたい。そんな時に便利なのが、今回紹介するjavascriptライブラリ「竹取JS」です。javascriptで指定されたブロックを縦書きに変換してくれます。 HTMLのみで縦書きというのは非常に面倒でしたが、これなら気軽に縦書きコンテンツを作れそうです。 詳しくは以下 上記のように文字だけではなく、リストや、取り消し線、テーブルなど様々なHTMLで創られた基本要素を縦書き化してくれますので、従来のサイトの構造を保ったまま縦書きのコンテンツを制作することが可能です。また切り替えボタンやダブルクリックで横書きへ瞬時に切り替わる機能も実装されています。 対応ブラウザはInternetExplorer5.5+ / Firefox3.5+ / Safari3.2+ / Chrome3.0+ / Opera10.5+と幅広いブラウザで利用可能。ライセンスは
WPプラグインの設定画面を デザイン、というかスタイル 用のコードとかをメモします。 そんなに作る機会は無いで すけど。 CODEXみたんですがちょっと見当たらなかったので調べたものをメモ。 アイコン ↑こういうアイコンを表示。 投稿アイコン <div id="icon-edit" class="icon32"></div> メディアアイコン <div id="icon-upload" class="icon32"></div> リンクアイコン <div id="icon-link-manager" class="icon32"></div> ページアイコン <div id="icon-edit-pages" class="icon32"></div> コメントアイコン <div id="icon-edit-comments" class="icon32"></div> 外観アイコン <d
PC用とiPhone用のサイトを切り替える.htaccess PC用のサイトにiPhoneでアクセスがあった場合にiPhone用のサイトに転送するというのはよくあるケースだと思います。更にiPhoneで「PC用」のボタンをクリックされた場合にPC用のサイトが閲覧できる.htaccessを考えてみました。 iPhoneからPC用のサイトへのリンクには「?mode=pc」というパラメーターをつけておきます。 RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod) RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^/$ /iphone/ [R] これでiPhoneで「?mode=pc」というパラメーターがない場合のみiPhone用のサイトに転送されます。 つまり、iPhoneで「http://bar.net」にア
画像を一切使用せずに実装する、軽快なアニメーションを伴ったナビゲーションのチュートリアルを紹介します。 Awesome Cufonized Fly-out Menu with jQuery and CSS3 デモページ デモでは右に配置されたナビゲーションの各ラベルにマウスホバーするとアニメーションでハイライトが移動し、それに伴う説明文が右からスライド表示されます。 HTML HTMLは非常にシンプルです。 <textarea name="code" class="html" cols="60" rows="5"> <div id="slidingMenuDesc" class="slidingMenuDesc"> <div><span>Maybe that's what life is... a wink of the eye and winking stars.</span></div
紙テクスチャを使う機会に恵まれているので、これを機にまとめてました。紙テクスチャは、シンプルなのでデザインの中にも取り入れやすく、かつ手作り感も手軽に出せて便利ですよね。そんな役立つフリーの紙テクスチャ一覧、そして実際にデザインに取り込んだチュートリアル記事のご紹介です。よろしければどうぞ。 紙テクスチャ Old Wrinkled Paper Texture Download Source Note-book texture Download Source Raw Paper Texture Pack Download Source Textures of Europe (France/Italy) 26 Download Source Old, aged paper / parchment 2 Download Source Old, aged paper / parchment 3 D
東京ノマドカフェマップ とは? ノマドとは、もともと遊牧民や移動民という意味を持っていますが、転じて、いつも決まった場所ではなくカフェなどでノートパソコンやタブレットなどを使って働くスタイルのことを指しています。 東京ノマドカフェマップではこういったノマドを受け入れてくれる場所を紹介しています。 都内の素敵なノマドカフェをご存知の方いらっしゃいましたらぜひ教えてください! facebookコメントか、Twitterアカウント@rtejpまでコメントいただければ更新していきます。
阿部寛のHPって理想のHPだよな Tweet 1:アラ(アラバマ州):2010/07/04(日) 22:39:02.28 ID:Dls8t03l 吉瀬美智子、阿部寛の主演で、ヌーベルバーグの傑作をリメイクする「死刑台のエレベーター」の 予告編が公開された。 1957年にフランスで製作されたルイ・マル監督の同名作をリメイク。女(吉瀬)が愛人の男(阿部)に 自分の夫を自殺と見せかけて殺させようとするが、男がエレベーターの中に閉じ込められたことから 計画に狂いが生じていく姿を描くサスペンス。「独立少年合唱団」「いつか読書する日」の 緒方明監督がメガホンをとった。 吉瀬、阿部のほか、2人が逃亡に使うはずだった車を盗む若いカップル役で、玉山鉄二と北川景子が出演。 予告編では、閉じ込められた男と、待つ女の姿が交錯するように、もうひとつの事件を引き起こす 若いカップルの姿もスリリングに映し出されていく。
IEでフォームのselect要素にwidthを指定した際、はみ出した箇所が省略されてしまうのを解消するスクリプトを紹介します。 Internet Explorer Select Width Bug Workaround デモページ 対応ブラウザは2010年6月17日の時点でIE6, 7, 8で、スクリプトを使用すると他のブラウザ(Firefox, Chrome, Safari, Opera)と同様に省略されずに表示されるようになります。 ※IE6には別途bgiframe Pluginが必要です。 スクリプトでは他の機能として、スクリプト側でのwidth指定、margin/padding/borderの設定も可能です。 設置は簡単で、既存のフォームにも簡単に適用できます。 jquery.jsとjq.ie-select-width.jsを外部ファイルで記述し、下記のスクリプトを記述します。 J
デザインに質感を与えてくれるテクスチャ。紙のデザインでも、WEBのデザインでもうまく利用すれば、今のデザインをもうワンランク高めてくれる、非常に画期的な素材です。今回紹介するのはシンプルで、激しくない適度なグランジのテクスチャセット「20 Simple & Subtle Grunge Textures」です。 セットになっているテクスチャの一部を下記にご紹介致します。 詳しくは以下 シンプルなデザインにもちょっとゴテっとしたデザインにも使えそうな非常に振り幅があるテクスチャが多く集められています。グランジな素材は数多く見かけますが、このような適度なグランジというのは珍しい気がします。ライセンスは商用利用も可能なようで、「free for personal and commercial use」と明記されています。 テクスチャはzipでまとめてダウンロードできるので、非常に使い勝手が良い素材
その他、speedやtimeout、pause(0:マウスオーバ時にスライドをストップしない、1:マウスオーバ時にスライドをストップする)などで細かく動きを指定することもできます。 そのほかにも指定可能なオプションはたくさんあり、「jQuery Cycle Plugin - Option Reference」で確認することができます。 スライドのコンテンツとナビゲーションを指定する 次に、bodyタグ内のXHTMLソースを見ていきます。 XHTMLソース(bodyタグ内) <div id="slider"> <div id="slideshow"> <div class="slider-item"> <div class="text_item"> <h2>Wonderful elephants<br /> living abroad.</h2> <p>フェードイン&アウトするシン
10 Great Tips to Boost Creativity [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブサイトをデザインするとき、ワンパターンに陥ってしまうことは簡単です。デザイナーは自分が何が得意であるか知っており、それを強みにして常用してしまう傾向があります。しかしながら、通常とは異なる視点をとることで、創造的なアプローチを新しい限界へとおし上げることができます。 創造力をアップさせることはウェブデザインの現在のトレンドを学び、何がそれを成功させたかを理解し、そしてあなた自身のユニークなスタイルを使ってそれらのテクニックを実行することから始めます。 あなたの創造力をあふれ出るようにするために、ここに考慮に入れるべき10のヒントがあります。 1. カラーを考えてみる サイトをゼロから作成する時や修正する時、コンセプトを強くするためにカラーの知識を深め
美しいサイトの元ファイルが見たい。 そんなときに参考になるのが、『BlueMasters』。高品質なPSDをダウンロードできるページです。 今現在サーバが落ちているようでアクセスできないんですが、SmashingMagazineとのコラボで、BlueMastersというテンプレートが公開されています。 You can freely use it for both your private and commercial projects, including software, online services, templates and themes. とのことで、商用的にも利用可能になっています。 テクスチャや透過度など、細かいところまで参考になると思うので、一度見てみてください。 BlueMasters さてと週末か。がっつりと進めなくては。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く