(Logo Design Process and Walkthrough for Vivid Ways) speckyboy.のエントリー『30 Creative Illustrator Logo Design Tecniques and Tutorials』から、Illustratorでロゴを作るときに役立つチュートリアルを紹介します。 詳しくは以下から、
It’s no secret that all of us here at SpyreStudios like left aligned website designs (I mean, look at SpyreStudios). Yes, at one point in time the left aligned websites were all we had, but then people found out about CSS and the centered websites dominated. This post is our attempt to show that left aligning your website is not dead and can definitely be used in creative and useful ways. Below yo
Home » Tutorials » Create a Letterpress Effect with CSS Text-Shadow Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property, it’s now simple and easy to cr
高画質動画共有サイトVimeoでの Gimpチュートリアル動画をいくつか ご紹介します。Youtubeにも多数 あるのですが、チュートリアル動画 はやっぱり高画質で見たいです。 Vimeoは高画質だらけの動画サイト なので個人的にかなりお勧めです。 見難い場合は拡大してみるか、Vimeoにアクセスしてご覧下さい。重い場合は一番下に動画のDL法を記載してありますのでご参考下さいませ。 また、Gimpそのものに関してはネタ帳さんの今度こそフリーの画像編集ソフト『GIMP』をマスターしようという人の為のまとめが参考になります。Gimpは一部、Photoshopブラシが使えますのでWeb制作に役立つオンラインサービスやツール300+内の素材関連に書いたフリーPhotoshopブラシ配布サイトで探してみると良さそうです。 Reflection Image Tutorial GIMP : Reflec
The quality and availability of WordPress e-commerce themes makes WordPress a serious choice as an online shop platform. In fact, WordPress has moved rapidly from being mainly a blogging platform and is now one of the top CMS systems for traditional websites. Lately,... Welcome to our Website Awards for best free WordPress themes. We are hosting this award to showcase the best websites to visit wh
webサイトを製作するようなときは、ロゴや使用するパーツ・画像などにあわせて全体の配色もきちんと決めたいものですね。 しかし、ただ適当に各部のカラーを選んでもなかなかいい具合には決まらず、四苦八苦することもよくあることです。 このようなとき、その画像で使っている代表的なカラーを抜き出し、適切なカラースキームを生成することができるFirefoxアドオンが「ColorSuckr」です。 「ColorSuckr」は、Firefoxで表示している画像で利用されている主要色をその場でリストアップし、それぞれの色に応じたカラースキームを同名のWebサービスを使って生成し、利用することができるというWeb管理者に便利なツールです。 <使い方> アドオンをインストール後、Firefoxで必要な画像を表示し、コンテキストメニューから[Extract Image Colors]をクリックします。 新規タブで以
WEBデザイナーとして日々感じたこと、思ったこと。 写真、絵、デザイン、WEB、インタラクションなことがらについて。 フットサル/サッカーの話題なども。 今、制作中の今、制作中のリニューアル案件のコンテンツをFlashちょこっと入れつつ、jQuery、thickbox、yugaでちょっとしたモーションを入れています。 そんな中、Tooltipも工夫することで、JSで動くコンテンツのアラを減らせればなーとか考えていたところ、 スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」:phpspot開発日誌 [JS]jQueryのプラグイン33+1選 -2009年4月 | コリス などで紹介されていた「qTip」を入れてみることにしました。 他のjsのTooltipとの比較だと、 ●画像を使わない ●CSSオンリーでカスタマイズ ●モーション、出現位置の調整はjsの数
lang=jaを削ったりとか「全言語から検索」をクリックして再検索とかめんどくさいし、デフォルト英語でいいんだけどなぁ、と思いながらGoogleの側でSearch LanguageやIntarface Languageを英語にしてみたりしてたけど、正解はこれ: http://mycroft.mozdev.org/google-search-plugins.html から「Google (No country redirect)」をクリックすれば一発インストール。 http://blogs.atanaka.biz/tanaka/index.php?itemid=960 本当に一発だった。もっと早くやっておけばよかった。
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Sean P Aune氏がSitePointにおいて19 Firefox Add-ons For Designersのタイトルのもと、Webデザイナ向けのFirefoxエクステンションを紹介している。Webデザインの作業をおこなうにあたり、複数のプログラムを起動して使うのではなく、1つのプログラムで複数の処理を簡単に行いたいという趣旨の内容になっている。紹介されているエクステンションは次のとおり。 カラーツール ColorSuckr (画像から代表的な色を12色取り出して、そのデータからカラースキーマを作成する) ColorZilla (ページのみならずブラウザの任意のポイントのカラーをピックアップするツール。任意の2点間の距離も測定できる) F
最近は、Webベースで画像編集が行えるサービスも充実しており、ちょっとしたサイズ変更などは重いツールを起動しなくてもブラウザだけで簡単に行えるようになっています。 このような分野はFirefoxの得意とするところで、これらのサービスに対応しているアドオンも数多くリリースされています。 今回は、その中でもかなり本格的な画像編集をFirefox上で行うことができるアドオン「Picture2Life」を使ってみました。 「Picture2Life」は、Firefoxで表示されている画像を同名のサービスで編集することを目的としたアドオンです。 このサービスは、既存のものよりかなり高機能な編集がWeb上で可能となっており、単なる画像の回転、サイズ変更、文字入力などだけではなく、コラージュ、エフェクト、アニメーション作成など、高額なローカルアプリ並の性能を持ったものとなっています。 <利用準備> サー
RDBMSは細かなデータ構造を管理したい時には便利だが、メモやWebページのようなコンテンツを管理する際には大袈裟になる場合がある。そうした時にはキーバリュー型のシンプルなデータベースが便利だ。キーバリュー型というとmemcachedのような補助的なシステムを思い浮かべるが、そこだけに収まらない使い方が出来る。 キーバリューデータベースを使ったCMS その実例としてTokyo Promenadeを紹介しよう。Tokyo Cabinetの作者で知られるmikio氏が開発したCMSだ。 今回紹介するオープンソース・ソフトウェアはTokyo Promenade、Wikiのようなページ管理ができるCMSだ。 Tokyo PromenadeはWikiのように誰でもコンテンツが編集できるCMSだ。記法としてはLaTeXでよく使われる記法を採用しており、見栄えもそれに近いものになっている。また音声ブラウ
► 2024 ( 1 ) ► 6月 ( 1 ) ► 2022 ( 1 ) ► 11月 ( 1 ) ► 2021 ( 5 ) ► 9月 ( 1 ) ► 8月 ( 1 ) ► 1月 ( 3 ) ► 2020 ( 12 ) ► 10月 ( 1 ) ► 6月 ( 5 ) ► 5月 ( 1 ) ► 4月 ( 2 ) ► 3月 ( 2 ) ► 1月 ( 1 ) ► 2019 ( 6 ) ► 9月 ( 1 ) ► 7月 ( 1 ) ► 6月 ( 1 ) ► 3月 ( 2 ) ► 2月 ( 1 ) ► 2018 ( 6 ) ► 12月 ( 1 ) ► 11月 ( 1 ) ► 5月 ( 1 ) ► 3月 ( 1 ) ► 2月 ( 1 ) ► 1月 ( 1 ) ► 2017 ( 6 ) ► 12月 ( 1 ) ► 11月 ( 1 ) ► 8月 ( 1 ) ► 7月 ( 1 ) ► 5月 ( 1 ) ► 3月
Webで使える画像が欲しいとき、壁紙を探しているときなどに役立つ検索エンジンといえば、Google 画像検索ですね。 このGoogle 画像検索では、左側に検索ツールを表示して、ある程度の絞り込みをすることができます。 デフォルトの検索ツールでは、以下のように画像のサイズ、種類、カラーなどがある程度指定できるようになっています。 しかし、ファイルタイプの指定などはすることができず、ちょっと物足りないと感じている方も多いのではないでしょうか。 そんな方に便利なGreasemonkeyスクリプトが「Google Image Search Advanced」です。 「Google Image Search Advanced」は、その名の通り、Google 画像検索にもうちょっと高度なフィルタ機能を加えてくれるというスクリプトです。 スクリプトをインストール後は、以下のように5つのドロップダウンリ
投稿日:2009年08月21日 レベル:初心者 ソフトウェア: このチュートリアルでは、Photoshopで金色のボタンを作ってみたいと思います。 Step1 : はじめに Step2 : 長方形を描く Step3 : レイヤースタイルを加える Step4 : 輝きを入れる Step5 : 完成
先月の社員PVランキングは91番目でした。agoです。 たまに他言語開発者から「JSは何となくわかるけど、jQueryが特殊すぎてよくわからない」という声を聞きます。 個人的にjQueryを使う場合、「JSの中でjQueryを使う」と言うより、「jQueryの中でJSを使う」と考えた方が理解しやすいと思うので、今日は"jQuery言語"の書き方を紹介したいと思います。 文法 Traversing methodでインデントを下げて、.end()でインデントをあげます。 (Traversing以外のmethodはインデントを維持します) そして、末尾には開始行と同じ位置に「;」を置きます。 $('body') .find('a') .filter('.permlink') .attr('href', function () { return $(this).attr('href').repla
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいUIに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg
speckyboyで、フォームを使いやすくするためのjQueryプラグイン&チュートリアルがまとまっています。 いくつかご紹介しますね。 » In-Field Labels jQuery Plugin inputの中に透かしのラベル名を入れられるプラグイン » A jQuery Inline Form Validation, because Validation is a Mess inputの右上に吹き出し型でバリデートのエラーメッセージを表示 » Justify Elements Using jQuery and CSS – Tutorial jQueryとCSSでlabelのwidthを揃えるチュートリアル » jQuery Comment Preview – Tutorial コメント入力中に投稿内容をプレビューできるプラグイン。↑のキャプチャはこちら » jQuery “High
先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。
画像やテキストをフォーカスした際に、不透明度をコントロールするスクリプトをdavid walsh blogから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500
ペインティングを実現するphotoshopブラシ集「300+ Excellent Photoshop Brushes for Creating Painted Effects」 photoshopには様々なブラシがリリースされており、ブラシ次第でその表現の幅はかなり広がります。今日紹介するphotoshopブラシ集300+ Excellent Photoshop Brushes for Creating Painted Effects」は絵の具やペンキで描いたような表現を可能にしてくれるブラシセットを集めたエントリーです。 WaterColor Reloaded – 83 brushes 様々な種類のブラシセットがあつめられていますが、今日はその中からいくつか気になったものいくつか紹介したいと思います。 詳しくは以下 ■Wet Paint Acrylic Photoshop Brushes
TOP > WebDesign > クロスブラウザの為のCSSテクニック集「15+ techniques and tools for cross browser CSS coding」 IE、Firefox、safariなどを始めとして様々なブラウザがリリースされていて、制作者サイドにはブラウザ間の差異を極力少なくすると言うのは使命の一つだと思いますが、構成によってはなかなか難しく手こずったりする場合があります。今日紹介する「15+ techniques and tools for cross browser CSS coding」はクロスブラウザの為のCSSテクニックを集めたエントリーです。 CSSをリセットする方法からIE用のCSSを読み込ます方法等々、様々なCSSのテクニックが紹介されていますが、今日はその中からいくつか気になったモノをピックアップして紹介したいと思います。
TOP > WebDesign > CSSで実現するボタンテクニック集「22 CSS Button Styling Tutorials and Techniques」 Designdevelopでは今まで様々なCSSテクニックをお伝えしてきましたが、今日紹介する「22 CSS Button Styling Tutorials and Techniques」はボタンのデザインに特化したテクニック集です。 Beautiful CSS buttons with icon set 立体的なボタンから、角丸はもちろん影がついたものなどなどCSSで作る手のこんだボタンのテップスやチュートリアルが収録されています。今日はその中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■How to make sexy buttons with CSS 立体的で角丸のスタンダードなボタン。
TOP > WebDesign > 商用可!WEB制作用途に特化したアイコンを6200個以上をまとめた「The Best Icons Always」 WEBの制作には書かせないアイコン。デザイン感を統一させて用いれば、全体のクオリティを押し上げてくれます。今日紹介するのはWEB制作で使えるアイコンに特化したまとめサイト「WebIconSets.com- The Best Icons Always at Your Fingertips」を紹介したいと思います。 それぞれのアイコンセットごとにまとめられていて、それぞれかなりの数が収録されています。アイコンの総数は全部で6200個以上となっています。今日は紹介されているセットの中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■FamFamFam Silk: 700+ icons in PNG format (16×1
GoogleはWeb全体の高速化を図るべく、Firefox/Firebugのアドオンとして動作するパフォーマンス検査ツール「Page Speed」を公開しました。同時にGoogleCode配下にパフォーマンスを最適化するためのチュートリアルや動画、ツールなどの情報をまとめた「Speed」というサイトを公開しています。 この記事はSpeedで公開されている記事の一つ「Optimizing JavaScript code」を翻訳したものです。JavaScriptのパフォーマンスを改善するためのTipsをいくつかコード例を交えながら掲載しています。 たとえば文字列結合において、Internet Explorer6/7の場合は+演算子を使わず配列のjoin( )を使ったほうがパフォーマンスが高いと解説しています(ちなみにSafariやFirefoxではそれほどパフォーマンスに差はありません)。
GoogleがWeb全体のスピードアップにいよいよ本格的に着手, 一社だけではできないと強調 からリンクのあった、 http://code.google.com/intl/ja/speed/articles/optimizing-javascript.html が日本語かと思ったら日本語じゃなかった・・・・。 いやー、意外とというか文字列については、全然知らんかった。 Closureって便利だし、「おぉ〜俺って使ってるジャン」みたいな気になれるからついつい使っちゃうんだけど、高コストなのね・・・・。反省。 ということで、超適当翻訳。どっかの誰かが書いてるかも。 前おき 著者: Google Chromeのエンジニア Gregory Baker, Software Engineer on GMail & Erik Arvidsson 推奨される経験:JavaScriptの実践的な知識 クライ
TOP > Design > 商用可!3000枚以上の写真素材をダウンロードできる国内フリー写真素材配布サイト「Futta.NET」 WEBだけに留まらず、イメージを伝える為に必要不可欠な写真。的確に利用すれば伝えたい事はより伝わり、全体のイメージも形作れたりします。今日紹介するのは3000枚以上の写真素材をダウンロードできる国内フリー写真素材配布サイト「Futta.NET」です。 風景写真がメインで、外国と日本、観光名所と街中の風景、自然風景、洋風・和風等の高解像度画像が公開されていて、その他にも世界遺産都市、スイス・ドイツ、東京・沖縄、犬・猫・鳥・猿、ビーチ・バー、桜・梅、虹のある景色など特徴的な素材もあり、様々なフリー写真素材がカテゴリに分けられて収録されています。 詳しくは以下 カテゴリー海の場合。 サイズは大きいもので3264×2448pxで公開されており、様々な用途に耐
TOP > Design , WebDesign > 様々なタイプの質の高いフリーアイコンセットをまとめた「A Bundle of Free Icons」 WEB上やデスクトップ。はたまた紙のデザインまで幅広く制作に使われるアイコン。伝えたい情報を分かりやすく相手に伝えるには非常に使い勝手の良いものです。今回紹介するのはWEBデザイン用からその他の用途に使えそうなアイコンまで様々なフリーアイコンセットをまとめたエントリー「A Bundle of Free Icons」を紹介したいと思います。 Dusk iPhone Style Icons かなりの数のアイコンセットが収録されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■PixelMixer Basic Set WEB用に便利なベーシックなアイコンセット。バリエーションも
使える!photoshopアクション集「60 Useful Photoshop Actions to Enhance your Photos for Free」 予め定めた動作をクリック一つで自動的に実行してくれるphotoshopアクション。同じような処理を実行する時にはかなり便利で、皆様仕事にあわせていくつかのアクションを組んでいると言う方も多いかと思いますが、今回紹介するのは実用的なphotoshopアクションを集めたエントリー「60 Useful Photoshop Actions to Enhance your Photos for Free」です。 Action Set 1 全部で60ものphotoshopアクションが収録されていますが、今回はその中からいくつか気になったアクションを紹介したいと思います。 詳しくは以下 ■Pencil Draw Photoshop Action
TOP > WebDesign > デザイン的に優れているjQueryプラグイン集「22 Beautiful jQuery Plugins for Web Designers」 軽量で高機能なjavascriptライブラリとして様々な用途に広く使われているjQuery。Designdevelopでも様々なプラグインを紹介してきましたが、今回紹介するのはデザイン的に美しいjQueryプラグインを集めたエントリー「22 Beautiful jQuery Plugins for Web Designers」を紹介いたします。 様々な動作を可能にするプラグインが紹介されていますが、今日は其の中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■Sliding boxes and captions with jQuery 様々な動作で画像にキャプションがつけられるjQuery
TOP > Design > ロゴデザインのデザインプロセスを集めた「16 Logo Design Processes Of Top Logo Designers」 デザインの中でもコンセプトを表現したり、その団体や企業を直接表すものになってしまうだけに的確といえるものを制作するのはとても難しく、楽しくも悩まされる案件ですが、今回紹介するのはロゴデザインのデザインプロセスを集めたエントリー「16 Logo Design Processes Of Top Logo Designers」です。 Dache.ch Logo Design Process 手書きのラフから、最終的なカタチになるまでどんなプロセスを追って作成されていったかが分かるようになっています。いくつかのロゴデザインのデザインプロセスが公開されていますが、今回はその中から気になったデザインを紹介したいと思います。 詳しく
TOP > Design , Photoshop > 敷きつめる事ができる雲と空のパターンとテクスチャセット「Tileable Cloud Patterns and Textures」 デザインをしていて、空を足したり、雲を描いたりなどを行なった事があるという商業デザイナーの方は多いと思います。方法は色々とありますが、今回紹介するのは簡単に雲と空を好きなサイズで描ける敷きつめる事ができる雲と空のパターンとテクスチャセット「Tileable Cloud Patterns and Textures」を紹介したいと思います。 テクスチャの大きさは1024×1024pxとなっていてそこそこ大きなものになっています。またパターンはphotoshopのパターンファイル.patで制作されていますので簡単に利用する事ができます。いくつかのファイルが公開されていましたので下記に紹介したいと思います。
A creative and well-designed portfolio is able to attract potential clients and indirectly increase your sales. So, it is important for every designer to have an outstanding portfolio. So, are you in the progress of redesigning your portfolio? Here are 50 beautiful and creative portfolios that i had collected. Hopefully these portfolios are able to help you or give you some inspiration. Nathan San
2008年8月設立。アクセシビリティ,ユーザービリティ,CMSの導入,SEO/SEMといったWebサイト制作から,ROIを意識したブランディング,ソーシャルメディアを用いたユーザーとのコミュニケーションの最適化など,マーケティング活動までを手がけるクリエイティブユニット。 2009年3月18日にInternet Exploler(以下IE)8が米国で正式公開されました。日本語版も同月20日からダウンロード可能になり,多くの制作者が実際に触れてみたことでしょう。しかし,それから4カ月が経とうとしている現在でもIE 8へのアップグレードはスムーズに行われていないようです。 筆者がアクセス解析を見た範囲では,IEのシェアが全体の85~95%前後,さらにIEの中では6と7が約45%前後,8のシェアが10%弱ということろです(7月6日時点)(表1)。
各種フォーム要素のCSS整形用JavaScriptプラグイン集が紹介されています。 独自にフォーム要素を作る際のまとめとして参考にできそうです。 チェックボックス・ラジオボタンを枠に置き換える クールな独自チェックボックス・ラジオボタンにカスタマイズ フォームを綺麗 こちらも同様にフォームを独自にデザイン JavaScriptとCSSの組み合わせで、なんでも出来ちゃいますね。 リンク先は以下のエントリより参照してください。 How To Use Pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins | Onextrapixel - Showcasing Web Treats Without Hitch
世界中にはニュースが溢れている。それもインターネットを使い、世界中で同時に、または好きな時間にニュースが閲覧できる。各ニュースサイトではフィードを配信しており、それを購読している方も多い。そうしたデータを集約、表示するだけでもとても面白いサイトができあがるだろう(著作権の問題もありそうだが)。 フィードを使ったニュースサイト構築に ニュースサイトに限らず、世界中にある雑多な情報から特定分野に限って切り出すのも面白い。そんなフィードアグリゲートサイトを作れるのがThe People's Feedだ。 今回紹介するフリーウェアはThe People's Feed、フィードを使ったニュースサイトを構築するWebアプリケーションだ。ソースコードは公開されているがライセンスは明記されていなかったのでご注意いただきたい。 The People's Feedの使い方は簡単だ。フィードを登録すると自動的に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く