Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: WebDesign

[PHOTOSHOP] Free Photoshop Actions to Boost Your Designs – フリーで配布されているフォトショップのアクション集

  • Pocket
  • このエントリーをはてなブックマークに追加

無料で配布されている、フォトショップのアクションが多数紹介されてます。人物の肌を綺麗にするものから切り抜き関係、紙や写真にプリントされたようにする加工等、色々とフォトショップが便利になりそう。自分の場合は、よく行うレタッチを途中(作業が分岐する手前)までをアクションにする事が多い。レイヤースタイルやブラシ等に比べるとちょっと地味なアクションという機能だけど、結構便利で好んで使っております。

[WEB DESIGN] CSS Design-Wettbewerb: Newsletterbox Designideen – CSSでデザインされた入力フォーム

  • Pocket
  • このエントリーをはてなブックマークに追加

WordPress内にある、過去の下書きを見ていたらこんな記事が(2006年の記事でした)。CSSでデザインされた入力フォーム。フォームをデザインしたものってSafariでは再現できない場合をよく見かけるんだけど、こちらで紹介されているものはSafariでも全然オッケー。しかもZipファイルでソースや画像まで配布されてます。最近じゃECサイトやCMSガラみのサイト等、入力フォームのある仕事も多いからとってもありがたい。いつか使おっと。

[FLASH] WS-Slideshow – サイト内に写真のスライドショーを簡単に作れるSWF

  • Pocket
  • このエントリーをはてなブックマークに追加

個人での利用であれば無料で使う事のできる、Flashを使ったスライドショー再生SWF。ダウンロードすると、ファイル一式が揃うので、あとは“slides”内にある画像を入れ替えるだけで基本的な設置準備は完了。“template.html”を任意に改変して、サイトにアップするだけでスライドショーの設置ができます。場所をとらずに1ページ内で数枚の画像を見せたい場合にとっても便利ですね。商用目的で使う際には、1サイト分で15ユーロ、無制限版で50ユーロ必要だそうです。

[CSS] Create Resizing Thumbnails Using Overflow Property – Javascriptを使わずに、CSSだけでサムネール画像を大きく見せる方法

  • Pocket
  • このエントリーをはてなブックマークに追加

などのJavascriptを使わずに、サムネール画像をユーザーの必要に応じて大きく見せる方法。デモはこちらで見る事ができます。概要を読むと、CSS書いた事のある人なら「あぁなるほどね」と思うような、ごくシンプルな内容です。リンク指定した画像の上にマウスオーバーすると、“overflow:hidden”されていたものが“visible”に変化するというもの。JSを使えば確かにリッチな見せ方はできますが、ロードに時間がかかったり、他のJSライブラリとのからみで導入できない場合もあるので、そんな時に便利な小技。

[JAVASCRIPT] mooSlidebox3 – lightboxとはちょっと違うコンテンツの見せ方

  • Pocket
  • このエントリーをはてなブックマークに追加

lightboxに近いコンテンツの見せ方なんだけど、出てくる場所やエフェクトがちょっと違うというJavascript。下からニュイっと出てくるので、例えばブログのナビゲーション類をここに集約させるとか、サイト内の特定のコンテンツの詳細説明を出すとか、そんな感じの使い方ができそう。ただ高解像度のディスプレイを使っている人の多くは画面上部にポインタ位置が集中するので、不便という見方もできます。サイト下部の“Sample”から動作確認ができます。必要に応じて使ってみたいJS。っていうかそろそろlightbox系のJSのまとめ記事でも作ろうかな。

[PHOTOSHOP] getbrushes.com – フォトショップ用のブラシ配布サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

フォトショップで使える、ブラシ定義ファイルの配布サイト。気に入ったブラシがあればダウンロードすることができます。各ブラシ定義ファイルはサイト内に格納されているわけではなく、配布元へのリンクが張ってあるという形なので、配布元を探して他にも色々ダウンロードできたりします。汚しやリピートオブジェクトのあるデザイニングをする際に、ブラシって結構使うんですよね。自分もいくつか頂いておきました。

[CSS] CSS Type Set – テキスト関係のCSSのジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

テキスト関係のCSSを、分かりやすいインターフェースで生成してくれるジェネレーター。左の入力欄にサンプルテキストを放り込んで、入力欄下部にある各種項目を指定するだけで、ページ右側にCSS記述を生成してくれます。この手のサイトっていくつかあるけど、ロードレスであること、スライダーを動かした時に連動するサンプルテキストの動き、マック環境でも変な動きをしないカラーパレット等、かなり使いやすい印象。特に“line-height”、“letter-spacing”、“word-spacing”の指定方法が秀逸。サイト内のpタグの基本指定を作る際に役立ちそうです。といってもフォントの種類に関しては基本的に英語圏でのサンプルしかないので、日本語フォントに関しては自分で指定する必要があります。

[PHOTOSHOP] Spice up your design with 56 Photoshop layer styles – レイヤースタイル詰め合わせ

  • Pocket
  • このエントリーをはてなブックマークに追加

フォトショップで使えるレイヤースタイルの定義ファイルが紹介されてます。なかなかセンスのいいレイヤースタイル56個が大公開。大盤振る舞いですね。Zipファイルでダウンロードできるようになっているので、早速頂きました。ダウンロードして解凍後、.aslファイルをダブルクリックすればフォトショップにインポートされます。アイコンやボタン類などの小物製作に大活躍できそうです。