Webサイトの作り方のまとめ！デザイン制作からコーディング手前まで。
話し合い Webサイトの制作に向けて、まず最初にする事は、依頼主についての情報を収集することです。依頼主と話し合い、どんなサイトにしたいのか、方向性を決めてゆきます。 依頼主との話し合いでは、以下の2点について、しっかりと決めておく事が大切です。 サイトにどんな情報を入れるか、どんな人に向けて発信するか、サイトをどう活用していきたいかなど、サイトを立ち上げる目的は何かを確かめる。 どんな雰囲気のサイトにしたいか、理想とするサイトや、希望・要望を聞きながら、どういうデザインにするかイメージを固める。 また、同業他社のサイトを片っ端から見まくる事。今回の場合、喫茶店やパン屋さん、ケーキ屋さんなんかが参考になるかもですね。他のサイトではどんなコンテンツがあるか、どんな見せ方をしてるかとか、この業種だとどんな色遣いのサイトが多いのかとか、たくさんみる事で、刺激になったり、イメージが掴めたりします。
これ使ってる？Photoshopのベスト機能10個と使ってはいけないワースト機能10個まとめ
デザイン編集に欠かせない Photoshop には、さまざまな機能が揃っており、あらゆる作業をよりスムーズにしてくれます。その一方で「これってどうやって使うの？」と思ってしまう、改善が必要な機能があるのも事実です。 今回は、デザイン作業に取り入れたい Photoshop のベスト機能10個と、利用を避けたいワース機能10個をまとめてご紹介します。Web / グラフィックデザイナーとフォトグラファーどちらの作業フローにも関係のある機能をバランスよく揃えています。 詳細は以下から。 Photoshop で積極的につかいたいベスト機能まとめ 01. トーンカーブ機能 写真レタッチを行いたいとき、もっとも手軽なテクニックのひとつと言えるでしょう。メインメニューより「イメージ」>「色調補正」>「トーンカーブ」を選択したら、直感的に波形を編集することができ、赤と緑、青のチャネルごとにいじることも可能な
もうシルエットの素材には困らない！人物や動物など600種類以上揃ったシルエットのベクター素材セット
個人でも商用でも無料で利用できる、600種類以上の人物・動物・乗り物をはじめスポーツやダンスなどのシルエットが揃ったベクター素材を紹介します。 素材はベクターのさまざまなフォーマットが揃ってます。 Free download: 600+ free vector silhouettes シルエットは多種多様なものがそれぞれにたくさん揃っています。 スポーツ 人物（ビジネス・女性・家族・恋人・子供など） ミュージック ダンス 動物 乗り物・交通機関 モーション 人や動物などの足跡 鍵 ダウンロードできる素材のフォーマットも豊富！ .ai .eps .svg .pdf ダウンロードは、下記ページの下の方からどうぞ。
Photoshopのガイド作成用スクリプト「Speed Guide」を作りました - saucer
Photoshopのガイド作成用のツールといえば、定番のGuideGuideや、先日アップデートしたQuickGuideなど、すばらしいエクステンションがたくさんありますが、それとはちょっとだけ違ったアプローチで「Speed Guide」というスクリプト（jsx）を作ってみました。特長は、複数のガイドを一度に作成できることです。人によって合う合わないが分かれる仕様だと思いますが、興味があればぜひ使ってみてください。 主な特長1回の処理で複数のガイドを一気に作成できる環境設定を変えることなく任意の単位を使用できる四則演算に対応している右下を起点にして作成できる中央を起点にして作成できる繰り返し回数を指定して作成できるCSVから設定を読み込める既存のガイド位置を取得できるダウンロードGitHubからダウンロードしてください。ページ右下の［Download ZIP］からソース一式をダウンロードで
ここまで出来る！！魔法の現像ソフト Lightroomのスゴイ使い方１０選！
写真は撮るだけでなく、撮った後の編集（現像）も非常に大事です。極端なことを言えば、１枚の写真を完成させるには撮影５割、現像５割と考えてもいいくらい。今回は私が愛用している統合RAW現像ソフトのAdobe Lightroomの凄いところを10個紹介してみようと思います。 魔法の統合現像ソフト、Lightroomで出来ること写真を始めて、撮ることに慣れてきたらぜひチャレンジしてほしいのが、撮った後の編集（デジタル現像）です。最近ではカメラ側で様々な設定や効果を適用できるようになりましたが、撮った後に編集できる事と比べるとその差は歴然。大変もったいないことをしているんです。 そこで今回は私の愛用する統合現像ソフト、Adobe Photoshop Lightroomのスゴイところを１０個ほどご紹介します。 撮るだけで編集（現像）なんてやったことない。。という方にはちょっとだけ敷居が高く感じるかもし
Photoshopでレイヤー周りのガイド引きを便利にする機能拡張 -Layer Guides
レイヤーに配置したエレメントの左・上・右・下に沿ってガイドを引きたい、天地中央・左右中央にガイドを引きたい、そんな要望に1クリックでガイドを設定できるPhotoshopの機能拡張を紹介します。 Layer Guides Photoshop Extension Layer Guides -GitHub Layer Guidesのインストール Layer Guidesの使い方 Layer Guidesのインストール ページの「Downloading the action」から「layer-guides-master.zip」をダウンロードします。 Layer Guides Photoshop Extension ファイルを解凍し「Layer Guides.zxp」をダブルクリックすると「Adobe Extension Manager」が起動するので、指示に従いインストールします。 Photos
「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ！
Photoshopでデザインカンプを作成して、いざコーディング！となると面倒くさいのが画像のスライス作業。 その画像のスライスを超絶楽にしてくれるツール「Slicy」を今さらながら導入しましたので使い方をご紹介。 レイヤー・グループに名前を付けて保存 アプリはMac App StoreでDLでも良し、公式サイトから体験版をダウンロードするも良し。 試しにこんなカンプを作成してみました。世界中のイケメンを紹介する、IKEMEN.comです。第一回目のモデルから頓挫しております。 データができましたら、切り出したいパーツのレイヤーorグループに名前（○○.jpgや○○.png）を付けて保存します。 あとはその保存したPSDデータをSlicyにぶち込むだけ。 見事、名前を付けた通りに画像がスライスされました:) あとはドラッグアンドドロップか、画像を選択して上のSaveボタンをクリックして任意の
【Photoshop】ボタンデザイン時に使える10の効果まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ボタンをデザインするときに使いがちなデザイン効果をまとめました。 詳しいやり方は記述しませんが、ほとんどがPhotoshopのレイヤー効果でなんとかなります。 コツは、色々と組み合わせて使うため、ひとつひとつを「やりすぎない」ことです。 ボタンデザインのご参考になれば… 01.Gradation グラデーション 02.Texture 模様 03.Border ボーダー 04.Dent へこみ 05.Shadow シャドウ 06.Text Shadow テキストシャドウ 07.Text Brightness 文字光彩 08.Reflection 反射 09.Highlights ハイライト 10.Shine てかり サンプル 作成例です。 01 + 03 + 04 + 06 + 09 + 10 を組み合わせています。 いろいろとお試しください〜。 LIGはWebサイト制作を支援しています。ご
ポチッとするだけでプロ級の写真処理ができる良質なPhotoshopアクションまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 昨今セピア風やらトイカメラ風何やら、昔っぽい写真のような加工が流行ってるみたいですね。自分的には今の最新鋭の一眼で撮ったまんまのようなクリアな写真のほうが好きだったりします。 とはいっても、たまには古き良き昔の写真も味深くていいのかもしれないですね。デザイン的見地から見ても色が統一されてたり、色の寒暖差が出たりで印象的な写真になりやすいものね。 スマホとかでその手のアプリが多数出回っているので、カスタマイズ性は低いものの、割りと手軽にできますが、パソコンなら言わずと知れたことだが、Photoshopで加工する場合がほとんどだと思います。 スマホよりは自分好みにいじれるが、いざやろうと思うとなかなか手間がかかって面倒だったりします。加えて、枚数が多い場合なんかはさおさらそうです。だがしかし！アクションを使えば一気に形勢逆転！ 寒色系 Purple wonde
Photoshopの作業効率をアップする便利すぎるエクステンションのまとめ
最後の一つだけ有料ですが、あとは全部無料の便利すぎるPhotoshopのエクステンションを紹介します。 ガイドや角丸の作成もレイヤー管理・パーツ管理も今まで以上に楽になるはず！ ガイド引きの効率アップ -GuideGuide 角丸の作成も修正も簡単にできる -Corner Editor PhotoshopのレイヤースタイルをCSS3にする -CSS3Ps レイヤー周りの機能を強化する -12 Pro Photoshop Time Savers 複数の画像で雑誌風のレイアウトを作成 -Tych Panel よく使うパーツを格納できる -Pixel Dropr ガイド引きの効率アップ -GuideGuide レイアウト用のグリッドを設計したり、エレメントの中心をだしたり、余白を確保するのに便利なエクステンション。 GuideGuide（無料） 対応バージョン Photoshop 2.0.3(f
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
Photoshop で背景透過の美しい favicon を作成する - 2xup
2006-04-28T23:23:04+09:00 favicon (ファビコン)はウェブブラウザのアドレスバーや、ブックマークした URL の横に表示される小さなアイコンです。いまやもうサイトのアイデンティティを明示するツールとしてほとんどサイトでみることができますが、小さいファイルであると共に、ファイルを扱えるソフトェアがそれほど多くは無いため、なかなか想い通りにデザインできない。という悩みを持っていました。できれば背景を透過にして、マットの少ない美しいものを作りたいと考えていて、使い慣れたソフトウェアである Adobe Photoshop で作れれば幸せだなあ。と思ってました。 これまでは、FavIcon from Pics という Web 上のツールを利用して作っていましたが、これは背景を透過にできなかったり、元の画像から変換される際に大きく画像の質が落ちてしまうという欠点がありま
FireworksはPSDファイルのスライスデータを読み込めます | hamnaly（ハンナリィ）ブログ
Fireworks Lover Advent Calendar 2012の9日目の記事です。 こんにちは。hamnalyの矢部と申します。静岡県在住、個人でWeb制作を行なっています。主にフロントエンドの実装（下請け、約60%）と、地元の企業や個人商店さんのサイト構築（直受け、約30%）が業務です。以上、「Fireworks Lover Advent Calendar 2012」向けの自己紹介でした。 Fireworksの「スライス」「書き出し」機能は非常に便利 いきなりぶっちゃけますが、あんまりFireworksが得意じゃないです。ですのでデザインをFireworksで行うことはまずありません。そんな私ですが、スライスと書き出しはFireworksで行なっています。PhotoshopやIllustratorにはないメリットがあると感じているからです。こんな感じです。 スライスを重ねること
10 Fresh Light Patterns (PAT) | Photoshop freebies - The Open Dept.
The Open Dept. TeamThe Open Dept. is an adventure started during the first months of 2012. It has been founded by Pasquale, a "sui generis" graphic designer coming from video post-production world, and Stefano, a young but very skilled designer and developer. We decided to use the "open" word because ours is an open project: here doors are always open to anyone who wants to contribute or partecipa
Adobe Creative Suite Toolbar Shortcut Wallpapers [Exclusive]
Designers can work hours into the night to produce their best work for clients, their portfolio or their pet projects. To make the process easier, most would use shortcut keys on their regular design and development tools particularly Adobe Photoshop, Illustrator, InDesign and Flash, to expediate the process. You can be sure that they are not going to go back to the traditional (and slower) click-
![Adobe Creative Suite Toolbar Shortcut Wallpapers [Exclusive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/37262a842822016bdcf43498bdbb9648b81d4169/height=288;version=1;width=512/https%3A%2F%2Fassets.hongkiat.com%2Fuploads%2Fadobe-shortcuts-wallpapers%2Fwallpaper-photoshop.jpg)
Photoshoopでの作業時間を短縮するのに役立つ10のテクニック
10 Photoshop Quick Tips to Improve Your Workflow 下記は各ポイントを意訳したものです。 1. レイヤースタイル パネルでの操作 2. 空の選択範囲の変形 3. 斜めの画像を水平にする 4. 画像に磨りガラスのようなパネルを設置 5. キレイな切り抜きを素早く 6. 瞳のカラーを変更 7. 画質に影響を与えないで照明のエフェクト 8. 作業確認用の新規ウインドウ 9. 画像からカラースウォッチを作成 10. レイヤースタイルをレイヤーの一部に適用 1. レイヤースタイル パネルでの操作 レイヤーパレットの下の「fx」ボタンをクリックすると開くレイヤースタイル パネルで、レイヤースタイルのアクティブ時に直接微調整ができます。 操作可能なスタイルは、4つです。 ドロップシャドウ グラデーションオーバーレイ サテン パターンオーバーレイ 4つのスタイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインのタネ | Web制作の効率化やトレンド・ノウハウ
Modular Grid Pattern
新着記事
新着記事
