新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
紙・金属・布・皮・草などのテクスチャを作成するPhotoshopのチュートリアル
写真素材を使用せずに、紙、メタル、カーボン、布、レザー、草などのテクスチャを作成するPhotoshopのチュートリアルを紹介します。
IE6、7でも動作・Lightboxのようにハイライトする拡大鏡を実装するjQuery・Loupe and Lightbox - かちびと.net
なかなか用途がありそうでした のでメモ。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を使いつつ、以下
縦書きを可能にするjavascriptライブラリ「竹取JS」
SEO的にも問題の無い縦書きのコンテンツを作りたい。そんな時に便利なのが、今回紹介するjavascriptライブラリ「竹取JS」です。javascriptで指定されたブロックを縦書きに変換してくれます。 HTMLのみで縦書きというのは非常に面倒でしたが、これなら気軽に縦書きコンテンツを作れそうです。 詳しくは以下 上記のように文字だけではなく、リストや、取り消し線、テーブルなど様々なHTMLで創られた基本要素を縦書き化してくれますので、従来のサイトの構造を保ったまま縦書きのコンテンツを制作することが可能です。また切り替えボタンやダブルクリックで横書きへ瞬時に切り替わる機能も実装されています。 対応ブラウザはInternetExplorer5.5+ / Firefox3.5+ / Safari3.2+ / Chrome3.0+ / Opera10.5+と幅広いブラウザで利用可能。ライセンスは
WordPressプラグインの設定画面デザイン用コードのメモ - かちびと.net
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用のサイトを切り替える.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」にア
[JS]ダイナミックで軽快なアニメーションを伴ったナビゲーション
画像を一切使用せずに実装する、軽快なアニメーションを伴ったナビゲーションのチュートリアルを紹介します。 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だよな : 暇人＼(^o^)／速報
阿部寛のHPって理想のHPだよな Tweet 1：アラ(アラバマ州)：2010/07/04(日) 22:39:02.28 ID:Dls8t03l 吉瀬美智子、阿部寛の主演で、ヌーベルバーグの傑作をリメイクする「死刑台のエレベーター」の 予告編が公開された。 1957年にフランスで製作されたルイ・マル監督の同名作をリメイク。女（吉瀬）が愛人の男（阿部）に 自分の夫を自殺と見せかけて殺させようとするが、男がエレベーターの中に閉じ込められたことから 計画に狂いが生じていく姿を描くサスペンス。「独立少年合唱団」「いつか読書する日」の 緒方明監督がメガホンをとった。 吉瀬、阿部のほか、2人が逃亡に使うはずだった車を盗む若いカップル役で、玉山鉄二と北川景子が出演。 予告編では、閉じ込められた男と、待つ女の姿が交錯するように、もうひとつの事件を引き起こす 若いカップルの姿もスリリングに映し出されていく。
[JS]IEでフォームのselect要素の中身が省略されてしまうのを解消するスクリプト -ieSelectWidth
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
高品質なPSDをダウンロードできる『BlueMasters』 – creamu
美しいサイトの元ファイルが見たい。 そんなときに参考になるのが、『BlueMasters』。高品質なPSDをダウンロードできるページです。 今現在サーバが落ちているようでアクセスできないんですが、SmashingMagazineとのコラボで、BlueMastersというテンプレートが公開されています。 You can freely use it for both your private and commercial projects, including software, online services, templates and themes. とのことで、商用的にも利用可能になっています。 テクスチャや透過度など、細かいところまで参考になると思うので、一度見てみてください。 BlueMasters さてと週末か。がっつりと進めなくては。
ページ移動の必要が無くなるページング系jQueryプラグイン・Pagination Plugin - かちびと.net
ページングのユーザビリティを あげたいけど、オートタイプは 嫌だ、と言う方にオススメの jQueryプラグインがありました。 選択肢の一つに如何でしょう。 タブのような感覚でページ移動が出来ます。ページ数の多いサイトはユーザビリティとしても取り入れたいですね。
無料且つ、ハイクオリティなアイコンを山のようにストックしているIconEasy - かちびと.net
アイコンサイトは数多くありますが、 こちらも負けず劣らず、素晴らしい サイトです。クオリティの高いアイ コンが山のようにストックされてい るIconEasyのご紹介。 基本的にはデスクトップアイコンみたいですが、5種類の大きさのPNGも配布されています。アイコンはWeb制作に重宝しますのでこういったサイトはいくつ覚えておいても損しないですね。全て無料ですが、ライセンスは異なりますのでDL前にご確認下さい。 綺麗で見やすいサイトですよ。こちらの特徴はハイクオリティながら、数が膨大であることです。 1つのカテゴリでも2万。カテゴリそのものも多くあります。基本的にはセットになっているのでページ数は大量では有りませんが、数そのものは膨大な量になります。 PNGは単体で セットDLのアイコンはico拡張子ですが、PNGは単体でDLする形です。大きさは128x128px、64x64px、48x48px
AI・PSD・PNGの画像をサムネイル化させ一覧表示させる:27歳社会復帰日記 初心者WEBデザイナー転職編
いちよう、Adobe Bridge （アドビブリッチ）というアドビ社のソフトがありそれを見ながらai(イラストレーター) やpsd（フォトショップ）形式のファイルがどんなものを作成されているか確認しながら すすめていきます。 ただ、起動時間が単純に重い。。。 自分のパソコンでは時間がかかり、作業効率どころではない。。。。 今かかえている問題はとりあえずjpg、gif、png、psdのファイルがサムネイル化されて見れれば問題ないですが、、、今後を考えるとeps、pdf、ai形式のファイルをサムネイル化させて直感的に作業できて、起動時間がそれほど食わないものわないか・・・・。 そう思っていましたが1つだけありました。 ------------------------------------------------------ XnView こちらは400種類の形式に対応してい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
[CSS]画像の四辺のボーダーを一味違ったスタイルにするチュートリアル
Blitz - ウェブクリエイタの人も，そうでない人も楽しめるデザインブログ
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
新着記事
