Photoshopで30分かかっていた作業がわずか1分でできるようになる「神速Photoshop [Webデザイン編]」
「学校では教えてくれない、89の時短テクニック」「自己流で時間をムダにしていませんか？ウェブデザインをもっとラクに、もっとすばやく」ということで、かなり実践寄りの効率的なテクニックばかりを集めたのが「神速Photoshop [Webデザイン編]」です。ちょうどPhotoshop CC＋Lightroom 5が月額980円で使える「Photoshop 写真家向けプログラム」を使い始めたところだったので、しげしげと読んでみてお役立ちっぽいのがないかどうか探してみました。 まず以下が神速デザイン五カ条、「ショートカットを活用しよう」「最新機能を使いこなそう」「目的によってツールを使い分けよう」「「直し」に強いデータを作ろう」「面倒な作業は自動化しよう」ということで、どれもこれもごもっともな感じ。人は放っておくと今までの慣れ親しんだやり方が非効率的であっても「慣れているから」というただそれだけの理
![Photoshopで30分かかっていた作業がわずか1分でできるようになる「神速Photoshop [Webデザイン編]」](https://cdn-ak-scissors.b.st-hatena.com/image/square/0c41fbe4b12f924168669811ff3092c3f86d6551/height=288;version=1;width=512/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2014%2F04%2F04%2Fphotoshop-god-speed-web%2FP1930188.jpg)
細かすぎて伝わらないアンチエイリアスの話
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photoshopのアンチエイリアスについては、基本的には５種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の５種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の４つに関しては シャープ：文字が太い / くっきり 鮮明：文字が細い / くっきり 強く：文字が太い / なめらか 滑らかに：文字が細い / なめ
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について
2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。 ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。 Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース 移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。 なぜそう言えるのかについて、簡単にまとめてみました。 目次 FireworksとPhotoshop、それぞれのメリットとデメリット なぜ「Photoshopは効
GWはじっくり腰を据えてスキルアップ！おさらいして読みたい、技術系お役立ち記事まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、GW前半に意を決して体組成計を購入し、体重・BMI・体脂肪率、内臓脂肪など、数々の恐ろしい数値があらわになったメディア事業部のあゆみです。体内年齢は27歳（実年齢＋2歳）…恐怖のあまり、即スポーツジムに入会しました。痩せよう。 さて、今年のGWはお休みが前半、後半と分断されていて遠出するか悩ましいカレンダーですよね。 そこで「中途半端にまとまったお休み、どこかに行く気力もお金もないし、どこに行っても混んでるからもう引きこもるに限る」という方にぜひ読んでもらいたい、LIGブログの技術系記事をピックアップしてみました。ゴロゴロするだけじゃもったいない！GWの時間を、知識・技術のレベルアップにあててみませんか？もちろん旅行や帰省の際の移動時間にもおススメです。携帯でも読めますので！（きっとPC開きたくなっちゃうだろうけど） WEBデザイン 必読！5分でわかる流行のレスポンシブWebデ
Photoshopの作業効率をアップする便利すぎるエクステンションのまとめ
最後の一つだけ有料ですが、あとは全部無料の便利すぎるPhotoshopのエクステンションを紹介します。 ガイドや角丸の作成もレイヤー管理・パーツ管理も今まで以上に楽になるはず！ ガイド引きの効率アップ -GuideGuide 角丸の作成も修正も簡単にできる -Corner Editor PhotoshopのレイヤースタイルをCSS3にする -CSS3Ps レイヤー周りの機能を強化する -12 Pro Photoshop Time Savers 複数の画像で雑誌風のレイアウトを作成 -Tych Panel よく使うパーツを格納できる -Pixel Dropr ガイド引きの効率アップ -GuideGuide レイアウト用のグリッドを設計したり、エレメントの中心をだしたり、余白を確保するのに便利なエクステンション。 GuideGuide（無料） 対応バージョン Photoshop 2.0.3(f
Slicing Images for Your Website with Photoshop
2014年8月17日 Photoshop, Webサイト制作 印刷物のデザインではそのまま印刷すればいいのですが、Webサイトの場合は出来上がったデザインをパーツごとに画像をスライス（分割）し、HTMLとCSSで組立ててWebサイト上に表示します。「実践で学ぶWebサイト制作ガイド」5回目ではそのスライス作業に注目！私は普段Fireworksを使ってスライスしていますが、ここでは前回と同様Photoshopを使ったスライス方法を紹介します。実践に入る前に、いくつかのポイントもおさえておきましょう。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その5 目標：コーディングしやすいパーツ画像を用意できる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 目次 誰のため？何のため？Webサイトを作り始める前に
Photoshop初心者は絶対に覚えてほしい!!画像を劣化させずに調整できるPSDデータの作り方
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。 Adobeのソフト一個だけあげるよと言われたら、迷わずPhotoshopを選びます。井畑です。 そんなPhotoshopラブの僕ですが、昔は正直苦手でした。 なぜなら、PhotoshopはIllustratorと違って、調整しているうちにデータが劣化(どんどん汚く)なってしまうと思っていたからです。 正しく言うと、データが劣化しない方法を知らなかっただけなんですけどね、当時は大変でした。 画像も一回小さくしてしまうと、次に大きくした時に荒れてまいますし、トーンカーブ等の画像補正も一回かけると二度と修正できませんでした。何回もトーンカーブかけてるとどんどん画像が汚くなっていくし… よく、サイズを間違えてて2,3時間の作業を一からやり直しして
PhotoshopやIllustratorを組み合わせて5分でも早く！Fireworks中心に制作している僕のAdobeソフトの使い方 | Webデザインのタネ
一定期間更新がないため広告を表示しています
Photoshopの便利なスクリプトや拡張機能のまとめ
Photoshopにも便利な機能を追加できるスクリプトと拡張機能があります。こちらでも自分が使っているものや便利そうだなと思ったものをまとめました。 スクリプトの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Scripts Mac → アプリケーションのAdobe Photoshop CS5\Presets\Scripts 拡張機能はダウンロードしたファイルをクリックすると、Adobe Extension Managerが起動しますのでそちらにインストールすればOKです。 Index… PSDからテキストを抽出 レイヤー名の「コピー」を削除 Fireworks風のスライスレイヤー 選択したフォルダやレイヤーを別ファイルへ
Photoshopの面倒なガイド引きを楽チンにするエクステンション -GuideGuide
ウェブページのレイアウト用にグリッドを設計したり、エレメントの中心をだしたり、余白を確保するなど、Photoshopのガイド引きを楽チンにするエクステンションを紹介します。 この機能はデフォルトで実装してほしいですね。 GuideGuide 以前、紹介した時に比べてバージョンアップし、使い勝手がよくなりました。 [ad#ad-2] GuideGuideの対応バージョン GuideGuideのインストール GuideGuideの使い方 GuideGuideの対応バージョン Photoshop Photoshop CS4 Photoshop CS5 OS Windows(32bit) Windows(64bit) Mac OS CS5+Mac OSX Lionでは「Patch」が必要です。 GuideGuideのインストール GuideGuideのインストールは簡単です。 ここでは、Windo
Web制作で重宝するジャンル別にPhotoshopブラシを集めたまとめの
クールでオシャレ ヴィンテージ フリーフォトショ... / ガーリーレトロ フォトショップ フリーブラシ/パ... / かわいい手書き系フォトショップフリーブラシまとめ...他...全20件
Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ
色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基本的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね！ 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル
洗練されたデザインのUIエレメントのPSD素材のまとめ
そのまま使ってもよし、デザインの勉強にもよしの洗練されたデザインのUIエレメントのPSD素材を紹介します。 素材は全て商用でも無料で利用できますが、ライセンスがそれぞれ異なるのでご利用の際にはご確認ください。
全74種のシンプルなデザインで使い勝手のよい矢印・アローのPhotoshopのシェイプ素材
Photoshopのシェイプ全74種 [ad#ad-2] 素材の利用にあたっては個人でも商用でも無料で、リンクの必要などもありません。 ただし、再売却・再配布などは禁止です。詳しくはライセンスページを参照ください。 license
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
新着記事
商用利用も無料、今時のシンプルながらディテールにこだわったUIエレメントとアイコンのPSD素材 -Impressionist UI
新着記事
