Photoshopの練習にも最適！デザイン抜群な無料Webテンプレート23個まとめ
海外デザインブログOnextraPixelで、デザイン性の高いWebサイト用テンプレートPSD素材をまとめたエントリー「Collection of Freebies for Designers」が公開されていたので、今回はこちらを中心に、個人的にブックマークしておきたいフリーアイテムをまとめて一緒にご紹介します。 デザインはもちろん、どのようにファイルが作成されているか確認することで、Photohsopの練習にもなる高品質で、魅力的なアイテムが揃っています。 詳細は以下から。 Photoshopの練習にもなる！デザイン抜群な無料Webテンプレートまとめ Liberty Creative ゴーストボタンやマテリアル・デザインなどトレンドを盛り込んだPSDテンプレート素材。ファイルの整理も参考になります。 Office Landing Page PSD ななめに配置されたボックスデザインが素敵
The best free UI kits, February 2015
Designers love UI Kits. They’re a great way to explore ideas, and they’re a great palette cleanser after a difficult project. Another reason to love them is that they give us incredible insights into the minds of other designers, without a client complicating things. As such they’re a great way to spot trends as they develop. Today we’ve gathered together some of the very best UI Kits from the las
Photoshopで簡単にテキストをスタンプ風に加工する方法 | SONICMOOV LAB
こんにちは。主にイラストコンテンツを制作しています、こばやしです。 先日、知人から【アンティーク風ウェディングボード】の制作を頼まれたのですが、イメージにピッタリ合ったもの＆オリジナル感ある素材を探すのはなかなか難しいですよね。 そこでPhotoshopを使い、好きなテキストや写真をアナログなスタンプ素材風にしてみました。 例えばこんな雰囲気の素材が ササッと簡単に作れてしまう方法を、今回はご紹介したいと思います！ 目次 Photoshopでスタンプ加工＜テキスト編＞ Photoshopでスタンプ加工＜画像編＞ Photoshopでスタンプ加工＜テキスト編＞ 1.加工したいテキストを用意 文字色を【黒】、レイヤースタイルの境界線を【白】に設定しておきます 2.スマートオブジェクトに変換し、フィルターギャラリーから以下のスマートフィルターを順に適用 【1】[ブラシストローク] → [はね]
身につけておきたいWebサイト高速化テクニック #4｜最適な画像書き出しの基本 | DevelopersIO
みなさんこんにちは、クラスメソッドWeb担当の野中です。 昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 *1だそうですね。びっくりです。 さて、前回の身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識では、画像の品質を保ちながらファイルサイズを抑えるためにそれぞれの画像形式の特性について紹介しました。 第3回でリクエスト数の削減について先に解説すると記載していますが、文章の構成を考えると画像の書き出しについて先に説明した方が流れとしてわかりやすいので順番を変更しています。 本題 今回はPhotoshopやIllustrator、Fireworksを使った最適な画像書き出しの基本的な手法について紹介したいと思います。 前回の記事で得た知識を前提に解説しますので、まだ前回の記事を読んでいない方は必ず読んでおいてください。 この記事の対象者 W
あなたが Photoshop で測ったポイント値は間違っている – UI デザインと解像度の話 iOS 編 - Qiita
機種別解像度の例。72 にスケールを掛けた値を設定すべき解像度とする 2. Photoshop の定規単位を設定する もう一つの設定は Photoshop の環境設定にある「単位・定規」です。次のように設定します： 定規: point 文字: point ポストスクリプトに合わせる (72 point/inch) 「定規はやっぱりピクセル単位が良い」という場合は少々面倒ですが適宜切り替えながら作業するのが良いかと思います。 PSD は大きい方から作って縮小する PSD は大きい方から作って最終出力時に小さい方に合わせる形にします。必要に応じて各端末向けに縮小したプロトタイプを個別に用意すると良いでしょう3。PSD の縦横ピクセル数は iPhone であれば 6 Plus のダウンサンプリング前の大きさ 1242×2208 pxにします4。ダウンサンプリングのことは OS が勝手にやってくれ
PhotoshopでiPhoneアプリのUIを作るための準備と設定
WebデザイナーがWebサイトだけでなく、スマートフォンアプリをデザインする機会が増えています。 ところが、Photoshopを使いこなしているデザイナーでも、UIのデザインとなると勝手が違い、試行錯誤している方が少なくないようです。本連載では、Photoshopを使ってアプリのUIをデザインするコツを、デザイナーのハマダナヲミさんが解説します。（編集部） Photoshopはもともと写真編集のためのソフトでしたが、印刷物やWebのデザインツールとしても使われるようになり、いまではデザインツールとしてPhotoshopを使っている方が多いのではないでしょうか。最近ではアプリのUIデザインにも便利な機能がどんどん追加されています。この連載ではWebデザイナーを対象に、iPhoneアプリを題材として、PhotoshopでUIをデザインする方法を紹介します。 第1回は、アプリ開発の大まかな流れを
レスポンシブを前提にしたPhotoshopでのカンプ作成、ちゃんとできてますか？ - Tortoise Shell
レスポンシブを前提にしたカンプ作成、ちゃんとできてますか？ 変化の激しいWeb業界では、技術的変化やトレンドに合わせて現場でのワークフローも変わり続けています。 数年前まではPhotoshopやFireworksでしっかりとカンプを作りこんでスライスを切って、やっとコーディング…という流れでしたが、これも通用しなくなってきています。 今更書くまでもありませんが、今日ではエンドユーザーがWebを閲覧する環境も多様化しています。 そうすると、従来のデバイス毎にがっちりとカンプを作りこんで管理しておくというワークフローは無理が出てくるわけです。 今求められているのは、どのような環境からアクセスしても快適にコンテンツを見ることができるような、スケーラブル（拡張性のある）なレイアウトなのです。 そこで、カンプ作成の段階でもレスポンシブを前提としたワークフローの導入が必須になってきました。 とはいえ、
Photoshop初心者がフォトショ上達するための基本的な使い方まとめ | LIG LIBRARY | 株式会社LIG
株式会社LIG TEL : 03-6240-1253 111-0056 東京都台東区小島2-20-11 LIGビル 1F受付
Photoshopから作るレスポンシブカンプ（前編） | ADC Plus
Photoshop CCをダウンロード Edge Reflow CCをダウンロード サンプルPSDをダウンロード Webデザインの世界において、Photoshopは決まった幅（固定幅）のデザインを作るツールです。レスポンシブデザインのために、いろいろな幅のデバイスを想定したデザインを作るには、PSDを何枚も作る必要がありました。 この記事では、Photoshop CCの最新版とEdge Reflow CCの最新版を使用して、PhotoshopからデザインをEdge Reflowに書き出し、レスポンシブなカンプを作るワークフローを紹介します。 前編では書き出したものをスマートフォンで見るところまで、後編ではレイアウトなどを調整して仕上げていく過程を紹介します。 必要な準備 Creative Cloudで、Photoshop CCとEdge Reflow CCを最新版に更新してください。
【Webデザイナー必読】PhotoshopやHTMLなどのスキルを劇的に上げられる記事まとめ30選
Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか？ Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選1.良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと こ
コーディングを考慮したWebデザインガイドライン
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。Read less
Photoshopでの面倒な作業を簡単に！便利すぎるPhotoshopのアクションのまとめ | コリス
グラデーションの縞々を取り除いたり、背景を削除したりする実用的なアクションをはじめ、カラーのバリエーションを生成したり、画像を幾何学模様やハーフトーンにしたり、テキストやオブジェクトを3DにするPhotoshopのアクションを紹介します。 no more banding フラットやソリッドなスタイルがトレンドでも、まだまだグラデも健在です。そんなグラデーションが汚く見えてしまう縞々（バンディング）を取り除いて、美しく仕上げるPhotoshopのアクション。 バンディングを取り除く仕組みは、以前の解説記事（グラデーションをより美しく滑らかにするPhotoshopのアクション ）をご覧ください。
紙の材質を作る：ザラザラ紙・シワシワ紙: イラレ・レシピ 時々フォトショ
円を変形した形のハートや雫（しずく）を作りました。背景を考える時に、イラストレーターでの白やベージュの背景ではしっくりこず、色々試した結果、吹付け風のザラザラした紙っぽいものに落ち着きました。ハートや雫（しずく）などのオブジェクトは「透明」パレットの描画モードを「比較（暗）」にしています。 背景の質感を変えると、それに伴い全体のイメージを少し変えることもできます。例えば下の例はシワシワな紙を用いました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
レスポンシブ対応のWebサイトテンプレート作成できる無料UIキット「Sally Blocks」PhotoshopVIP |
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
Photoshop Vip » 味わいのあるPhotoshop用グランジストライプパターン6枚セット「Grungy Stripes Pattern」
フォトショップ用語 英語-日本語対応表
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
