劣化させずに高品質のまま画像のファイルサイズを圧縮するなら、Photoshopの書き出しの設定をしよう｜フリー素材のぱくたそ
ぱくたそで配布しているフリー素材は、「JPEG」形式の画像データです。ファイルサイズは、1枚5MBのものが平均で、夜景などノイズが多い画像は、1枚20MB近くになります。 青空と雲｜ぱくたそフリー素材 満天の星々を望む（岡山県鏡野町笠菅峠から撮影）｜ぱくたそフリー素材 上記写真では、青空が3MB、夜景が16MBと5倍近くの差があります。これは夜景の写真に記憶されている星やノイズなどの情報が、澄んだグラデーションの青空よりも圧倒的に多いためファイルサイズは大きくなっています。ですので、ファイルサイズが大きければ大きいほど、高品質の画像であるとは限りません。 ふまえて、JPEG画像のファイルサイズを圧縮する話にすすみましょう。 ファイルサイズが大きいという表現は、「重たい」という風に使うことが多々あります。「画像が重たくてメールで送れなかった」「画像が重たくてサイトの表示が遅かった」という感じ
Photoshop CCの知ってると作業がサクサク快適になる時短テクニックのまとめ
Photoshopって知れば知るほど、使えば使うほど、便利で欠かせないツールですよね。そんなPhotoshop CCの実作業が快適になる時短テクニックを紹介します。 例えば一時的にスポイトツールを使う時、どのように操作していますか？ 「I」を押してスポイトツールに切り換える時に「I」を長押しで使うと、「I」を離した時に元のツールに戻すことができます（全ツール対応）。戻せるのはスペースバーの時だけではないんですね。 まだまだ知らないことばかりです。 28 Powerful hidden tips, tricks 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ※各ショートカットは、OS X用です。 Windowsの場合は、下記のように置き換えて利用してください。 command = Ctrl option = Alt delete =
PSDファイルでできるんだ！要素がぷるるんとアニメーションでくっついたり離れたりするエフェクト -Photoshop Gooey Effect
PSDファイルでできるんだ！要素がぷるるんとアニメーションでくっついたり離れたりするエフェクト -Photoshop Gooey Effect
【サンプルPSDデータ配布中！】デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
【サンプルPSDデータ配布中！】デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみた こんにちは、デザイナーのもりたです。 突然ですが皆さん、整理整頓は得意ですか？ 私の会社のPCのデスクトップはスクリーンショットだらけです。 よく整理整頓の第一歩はルールづくりだと言いますね。 リモコンはサイドテーブルに置く、雑誌はラックに入れる、シャツ類は一番上の引き出しに入れる……。でも、整理整頓ができる人にはきっとわからないけれど、自分に合わせたルールをつくるのが一番めんどくさいんですよ！ だからデザイナーの間でもPSD（Photoshop Document）のレイヤー整理がまちまちだったり、同じ人でさえ場合によって変わったりします。そこで、いちいち考えることすらめんどくさくなったので、社内共通のルールをつくってしまおうということになりました。 せっかくつくったので、今回はそれをご
WebデザイナーのためのPhotoshop CC 2014の新機能まとめ
この記事は、Photoshop CC 2014 の新機能をWebデザイナー視点からまとめた記事です。 6月19日の「Adobe Create Now 2014」および、6月23日の「アドビ 報道関係者向けCreative Cloud 最新製品 デモセッション」で聞いた話を含みます。 新機能の一覧 現在私が把握している、Photoshop CC 2014 の新機能は以下のとおりです。 Webデザイン制作に深く関係しそうなものは太字にしています。 ぼかしギャラリーのモーション効果 文字ツールでフォント検索が可能に ライブフォントプレビュー 開いたPSDにフォントが存在しなかった場合、Typekit のフォントで置換可能に スマートガイドでオブジェクト間の距離を表示、均等に配置が可能に リンクされたスマートオブジェクトのレイヤーカンプの切替が可能に 焦点領域 埋め込まれたスマートオブジェクトをリ
the-orange-box.com | Made with attention to detail
The FX Box is required to use our latest effects and tools in Photoshop CC-2014 and newer. Load and remove new FX Tools easily – without the need to restart Photoshop! manage your favourite FX Tools free for Photoshop CC-2014 and newer easy installation and easy to use The free FX Box Plugin for Photoshop CC-2014 and newer is suitable for Mac and PC. There are already several free FX Tools availab
PhotoshopのCMYK変換設定のキモ、プロファイル、マッチング方法、ほかを「10分で」簡単に説明してみた（154回バンフーセミナーフォローアップ）
PhotoshopのCMYK変換設定のキモ、プロファイル、マッチング方法、ほかを「10分で」簡単に説明してみた（154回バンフーセミナーフォローアップ） 3/18のバンフーセミナーで10分だけお話してきましたよ。 【株式会社 帆風】第154回バンフーセミナー 第154回バンフーセミナー（InDesign）が3月18日に開催 – DTP Transit（InDesign, セミナー, イベント, 展示会, バンフーセミナー） 4分押したけどな！（すまぬ…すまぬ…講師の鷹野さんより、CMYK変換について何か〜ということで振られたのですが久しぶりで心臓破れるかと思ったわｗ） で、内容はCMYK変換設定のキモ、 プロファイルって何やってんの？ マッチング方法って何なのよ？ あんど、あまり触れたくないアレ CMYKプロファイル埋め込みてどうなのよ？ 以上をできるだけ簡単に、Photoshoperでな
細かすぎて伝わらないアンチエイリアスの話
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photoshopのアンチエイリアスについては、基本的には５種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の５種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の４つに関しては シャープ：文字が太い / くっきり 鮮明：文字が細い / くっきり 強く：文字が太い / なめらか 滑らかに：文字が細い / なめ
「ロングシャドウ」エフェクトをPhotoshopの3D機能で簡単に作る方法 | 株式会社LIG
フラットデザインとロングシャドウが定着しつつある今日このごろ。いつ廃れるかは誰にも分からないが、いわゆる「ロングシャドウ」ってやつは割りと綺麗だなと個人的に思ってます。作り方はCSSならtext-shadowを利用したジェネレーター、Photoshopならスマートオブジェクトを使ったテンプレートやアクションなどがあります。今回は一味違うやり方で、Photoshopの3D機能を使っての作り方をご紹介します。 なぜ3Dで作ったほうが便利かというと、それは、このように、入射光を調整することが簡単に行えるからです。 あと、光の減衰で陰がだんだんとぼやけていくというちょっとリアルな表現もPhotoshopで簡単にできちゃいます。 ※制作環境はPhotoshop CS6以上が必要です。 ロングシャドウをPhotoshopの3D機能で作る方法 3Dオブジェクトに変換 レイヤーに右クリックして、テキストレ
写真は怖くない！すごい「Photoshop」マジック小技集２３
作成：2013/07/16 更新：2014/11/01 無料素材 > 写真うつりが悪い、気になるところをサクッと修正したい。今回は、顔や体型を簡単に修正する方法やアクションをまとめました。結構共通する部分が多いですが、顔以外にも使える色々な方法があるのでお試しを。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 髪 １．髪の色を変える ２．髪の毛を切り抜く 肌 ３．シミやそばかすを消す ４．肌を美白にする ５．肌を滑らかにする 顎 ６．顎をシャープに ７．リフトアップ 目 ８．目を大きくする ９．まつげを増やす １０．目のクマ／ほうれい線を消す １１．目の色を変える 鼻・唇 １２．鼻を高くする １３．ぷるるん唇にする １４．歯を白くする 体型・表情 １５．バストアップ １６．ポーズを変える １７．顔の表情・形を変える 背景 １８．背景を消す １９．背景をぼかす
Photoshop補正講座〜ヒストグラムとレベル補正とトーンカーブ〜 – from Editors | サストコ
こんにちは。唐揚げ大好き横地です。 先日、社内で「Photoshop補正講座」というのを開催しました。 メインコンテンツは「ヒストグラムの理解と、レベル補正とトーンカーブの使い方」でした。 先ず、レベル補正、トーンカーブに興味を持っている時点で初心者の域から一段昇っていると思いますが、これらを感覚でなく理論で使いこなせるようになるためには、ヒストグラムへの理解が必須です。 多くのPhotoshop本などで、ヒストグラムへの言及はありますが、これがそもそも何であるかを、きちんと理解できるよう説明しているものは少ない… 私自身は、そこを「ちゃんと」説明している本に出会ったことがありません。 たとえば、Photoshop Lightroomのヘルプでは、このように説明されています。 http://helpx.adobe.com/jp/lightroom/kb/6280.html ヒストグラムとは
PhotoshopのGPU/OpenGLって使ってる？ 僕が使ってるお気に入り機能まとめ / Maka-Veli .com
メモリ食いますしグラボによっては使えないそうですが、皆さんGPU/OpenGLって使ってますか？僕は一応使ってます。使いこなせてないと思いますが。けっこう便利な小技が揃ってるので、個人的に気に入った機能をまとめました。使った事無い方は是非一度お試しください。 それと、3Dが出来るのは大きいかもしれないですね。使い方によっては面白い装飾が作れます。 が、3Dに関しては知識不足の為、省きます。 CS4から、あるいはCS5から導入された物が散らばってますが、 僕の環境が5.5なので5.5前提で書いていきます。ちなみにWinですが、Macも部分併記。 それと、恐らくCS6は微妙にどこか違うはず。6での追加機能も特に調べて無いです。 なんだよCS6書けよとご不満の方、CS6買って！CC1年でも良いです。ぜひ！ フリップ スマホ的な感じで、するするーっと動くようになります。 [Spac
【UI デザイン 練習用 - エアメール風】 - Webサイトのデザインをしよう
2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載！実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その4 目標：実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい！ これからP
写真の一部を動かすシネマグラフを使ったGoogleイベントのカバーが素敵！ - すしぱくの楽しければいいのです。
公開日：2012年9月 6日 カテゴリ：Googleネタ 流行りの手法ではありませんが、写真の一部分を動かす事でまるで動画のように錯覚してしまう視覚的効果を狙ったシネマグラフをご紹介します。（実際に作ってみたレビュー付き） 仕事の合間にGoogleイベントを徘徊していたらカバー写真がシネマグラフで作られておりまして、「うぉーやっぱり素敵すぎるー」とか影響を受けてしまい、今後の補完用としての紹介と実際に作ってみた記事を書いてみました。 シネマグラフについて ちょっと前に、Webサイトのアクセントとして（海外サイト発で）色々と紹介されましたねー。いくつか紹介すると 【画像】写真なのに動いてる！動画のような不思議な写真、シネマグラフ14枚 いやはや、綺麗ですねー。被写体が動いてくれる物であれば、静止画にマスクをかけて動画を挿入してGif形式に変換する感じですかね。ただの静止画よりもちょっとしたア
即戦力となるアナログ表現の技を押さえる - MdN Design Interactive
腕のいいデザイン事務所で修業しないと ふつうは身につかない知識と技と心得 10 即戦力となるアナログ表現の技を押さえる 解説： 高橋としゆき［Graphic Arts Unit］ url： www.graphicartsunit.com/ 使用ソフト: Photoshop CS3 かすれや汚れなどといった、アナログの演出がデザインで必要になる機会は多いはずだ。そうしたアナログ感の演出にはさまざまな方法があるが、基本的な手法はしっかり身につけておきたい。ここでは、デジタルだけでアナログ感を表現する方法を紹介しよう。 実際にプリントアウトして作業する時間や環境がない場合や、画材などを使ったアナログの作業を経ずに、もっと手軽にアナログ感を表現したいということもあるだろう。アナログ風の質感はPhotoshopのフィルタなどを駆使して表現することもできるので、そうした技を使った多彩なアナログ表現を覚
Photoshopで理論的に配色はできないものか検証してみた
最近は配色を作れるジェネレータや配色をシェアするサイトが多数あり、簡単に配色を作ることができます。ただ、そういうのに頼らずにもっとPhotoshopだけで理論的にできないものかと思い検証してみました。 動機 配色を作れるツールっていまいち使いこなせてないし、自分がイメージしてる配色をPhotoshopで理論的に作れたら楽だなと思って。 結論 最初に結論を述べます。 Photoshopで色相を使った配色は基本的には難しいです。（できなくはないが非常に手間がかかる） 彩度・明度を使った配色は簡単にできる。 また、トーンを使った配色ならそれなりにであればできる。という結論になりました。 Photoshopの表色系の落とし穴 色相を順序立てて円環にして並べたものを色相環と言い、色相環の反対の位置が補色となります。 つまり基準となる色に180°足した色が補色になります。 ところが下記のようにPhot
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト
Files | Adobe Creative Cloud
Web制作者必見！Photoshop CCにSlicyのような画像アセット（Generator）機能が追加
http://dandkagency.com/velositey/