タグ

Web制作とPhotoshopに関するglat_designのブックマーク (39)

  • Easy Ways to Reduce Noise in Your Images

    2013年3月25日 Photoshop 暗い場所や室内で取った写真はノイズが入りやすいですよね。画像を補正する際、意外とやっかいだったりします。Photoshopには「ノイズを軽減」機能もありますが、なんだかあまり変化がなかったり…。そんなノイズを簡単に軽減する方法をいくつか紹介します。ビフォー・アフターの差にびっくりしちゃうと思いますよ! ↑私が10年以上利用している会計ソフト! Neat Image Neat Imageは画像のノイズ除去を自動で行なってくれるソフトです。WindowsMacLinuxで利用でき、Photoshop用のプラグインも使うことができます。無料版と有料版があり、無料版では大きなサイズと商用利用は不可です。今回は無料版を試してみました!

    Easy Ways to Reduce Noise in Your Images
    glat_design
    glat_design 2012/07/03
    おお。手軽で結構キレイっすね!
  • Photoshop & Illustrator CS6 の進化したところと不具合まとめ

    5月27日に、渋谷 LightningSpot にて Webデザイナーのための Adobe CS6 検証会 をひらきました。 日曜の開催にも関わらずたくさんの方にお越しいただき、CS6 について熱い議論が交わされました。 ご参加いただいた皆様、ありがとうございました。 CS6 検証会では、Photoshop、Illustrator、Fireworks はもちろん、Dreamweaver、最後は VPS など CS6 と関係ないところまで話が飛んだのですが、この記事では Photoshop CS6 と、Illustrator CS6 の進化したところと不具合などについてまとめたいと思います。 Photoshop CS6 の進化したところや活用法 Web制作に関係ある機能の多くは Webデザイナー視点から見たPhotoshop CS6の進化したところ という記事に既に書いていますのでそこは省き

    Photoshop & Illustrator CS6 の進化したところと不具合まとめ
    glat_design
    glat_design 2012/05/30
    3Dのとことか見てるとSketchUpをいじってたの思いだすな…楽しいんだけど使いどころがwなんかで使いたいな。
  • よく分からずにトーンカーブを使っている人に。 - kojika17

    画像の色調補正する時、何を使いますか? 私の場合、基的な画像補正はトーンカーブ1つでほとんど済ませてしまいます。 トーンカーブは使い方が分かれば、簡易的に明度、色調、コントラストなどを補正できる強力なツールになります。 Photoshopベースで紹介しますが、FireworksやGIMPでもトーンカーブを扱えますので、参考になれば幸いです。 トーンカーブのデモで使用する画像は、フリーで配布されているPAKUTASOさんから写真をお借りして、説明します。 トーンカーブ基 縦軸と横軸は、0から255まで階調を表しています。 画像モードがRGBの場合、縦軸は上から下に向かって暗くなり、横軸は左から右に明るくなります。 横軸が入力、縦軸が出力を表します。もっと噛み砕くと、横軸が元画像の階調、縦軸が補正後の階調です。 斜めに走っている線にはいくつも点が打て、曲線や直角にしたりできます。 階調の出

    よく分からずにトーンカーブを使っている人に。 - kojika17
    glat_design
    glat_design 2012/03/16
    うおーごみ取りまでトーンカーブでやるんだw確かに保存しとけば簡単かも。
  • photoshop備忘録:何度でもかけ直し可能なフィルタ『スマートフィルタ』について

    まだまだ知らないことって多いもので、ネットで配布されているpsd素材を勉強がてら解体していたところ 初めて「スマートフィルタ」なるものに遭遇しました。 CS3以降の機能なのかな、まったく知らなかったので使い方など調べてみましたのでまとめます。 スマートフィルタとは 後から数値を調整できるフィルタのこと。 「ぼかし」「ノイズを加える」などなど これまでフィルタというものは後からの調整は出来ないのが通常でしたよね。 しかしスマートフィルタを使えば直したいと思った時に再びフィルタメニューを開くことができるので 仕上がりが気に入らなければ後から何度でも修正が可能になります。 何だこれディ・モールト便利じゃあないか・・! スマートフィルタの使い方 それでは簡単に使い方を書いていきたいと思います。 photoshopでのデザイン中、いつもならオブジェクトに直接フィルタを使用するところを、 スマートフィ

    photoshop備忘録:何度でもかけ直し可能なフィルタ『スマートフィルタ』について
    glat_design
    glat_design 2012/02/01
    調整レイヤのフィルタ版みたいなものか。普通に知らなかったww
  • PhotoShopで最適な画像保存をする為に。ニアレストネイバー法やバイキュービック法でのリサイズやJPEG圧縮などを検証したよ。 / Maka-Veli .com

    どうも。某サイトのクオリティにがっかりしてる松です。 これからは自分らしく普段通り書いていこうと思いますので宜しくお願い致します。 さて、今回はPhotoShopの画質変換・圧縮についてです。 ニアレストネイバー法、バイリニア法、バイキュービック法でのリサイズと、保存時の圧縮率パーセンテージ別、更に写真の特徴なんかとを比較すると何か新しい発見があるかなぁとふと思いましたので検証してみます。そもそも、それ何?という方も、簡単な説目を書いておきますので合わせてご覧ください。 それと「プログレッシブ、プロファイル、カラーマネージメント」なんかが複合的に絡むとややこしいので割愛。 一番シンプルなアルゴリズムなんじゃないでしょうか? 変更前の座標と、変更後の座標を、ピクセル単位で計算し移動させ、そのピクセルに対して変更前の色を割り当てる。 ドットをそのまま拡大、縮小する ような感覚で

    glat_design
    glat_design 2012/01/29
    ニアレストネイバーとバイキュービックはいちいち切り替えたりする。「○○には○○」とかあるとなおいいかもです!
  • 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

    glat_design
    glat_design 2012/01/11
    グリッドのガイドをサクッと作れる。使おうかな
  • コンマ数秒の積み重ねが大差をつけるPhotoshopのショートカット/機能、厳選7つの妙技! | バンクーバーのうぇぶ屋

    さて、実は前回の爆速記事で書こうと思って収まりきれず、先延ばしにしたネタがありましたのでこちらで共有させて頂こうかなと思います。 前回の爆速作業の場合、まぁ普通のブログ作っただけだし、WPだしってことでコーディング部分はぶっちゃけ大したボリュームに成らなかったわけですが、やっぱ改めて大事だーと思ったのがフォトショのショートカットや、役立ち機能の数々。ショートカット使うか使わないかなんて、下手すればコンマ数秒程度しか変わらないかもしれませんが、その積み重ねが大きな時間を生んでいることは間違い無いと思います! かねてフォトショップのキーボードや、役立ちネタは色々ご紹介させてもらっていてましたので、この機会に僕の方で知っている便利機能の数々を一度まとめてご紹介させて頂こうと思います。 ここで紹介させて頂くのは、僕もフォトショップは使っていたので、ショートカットや機能は知っているつもりだったのです

    コンマ数秒の積み重ねが大差をつけるPhotoshopのショートカット/機能、厳選7つの妙技! | バンクーバーのうぇぶ屋
    glat_design
    glat_design 2012/01/11
    ショートカット記事あんまり見ないけどわりとホントに知らなかった…wブラシ記事は今詳しいの書いてます★
  • 【プリセットの使用方法 ★★★超基本】 - ブラシ、テクスチャ、スタイル…自作のアイテムを作ろう! - WEBCRE8.jp

    Photoshopでの操作には人や仕事の種類によってよく使うモノがあり、ほとんどの機能には「これを作るときはこのくらい」といった使いがちな設定や数値を保存しておく機能があります。いくつかの制作物に同じ効果をかけて統一感を出したり、作業をショートカットする為に使うわけですね。 その設定の調達手段として、 プリセット 配布ファイル 自作 といったものが挙げられます。 プリセットとは Photoshopにはブラシやパターン、アクションなどにデフォルトで用意されたプリセットというものがあります。 何が用意されているかはバージョンによっても違うと思いますけど、場所は コンピュータ:C→Program Files→Adobe→Adobe Photoshop*.*とかCS*→プリセット(Presets) の中にあるはずです。 ちなみにwebcre8はCS4を使っています。Web PremiumなのでFi

    【プリセットの使用方法 ★★★超基本】 - ブラシ、テクスチャ、スタイル…自作のアイテムを作ろう! - WEBCRE8.jp
    glat_design
    glat_design 2011/10/31
    これは、これから始まるPhotoshop素材作成地獄の序章に過ぎなかったのです…ゴゴゴゴゴ
  • fladdict さんのTweetから:複数枚の写真からPhotoshopで動いている物を自動で消す方法 | アプリなどのこと | s-style-arts

    先日、@fladdict さんの「500枚ぐらい同じ写真とって全画素でピクセルの最頻出の値を採用したら、街の写真とって移動する人物全部自動で消すとかできるのかなぁ・・・とか。」と言うTweetに反応して、Photoshopで出来る事をお返事したところRTして頂いたのが物凄い数ふぁぼられて思わぬ反響だったので、実際に素材を撮ってデモってみました。 ちなみに多くの皆さんはご存知だとおもいますが @fladdict こと深津貴之さんは、TiltShift GeneratorやToyCameraなど作っておられる日で最も有名なiPhone・iOSアプリ制作者のひとりです。 さて、まずは素材に使う写真が必要なので人が多い雑踏に行こうと。東京なら渋谷のハチ公前とか、大阪なら駅前の歩道橋とかぱっと思いつきますが田舎なのでなかなかいい場所が思いつきません。まぁ世界遺産姫路城であれば平成の大修理真っ只中と

    glat_design
    glat_design 2011/10/02
    これは面白いテクニックだと思う。絶対使う
  • Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ

    色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね! 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル

    glat_design
    glat_design 2011/09/28
    おおちょっと今書いてるのと被ってるwしかしのりさんのはわかりやすい。スタイル好きなのでこういう記事好きっす☆
  • Photoshopユーザが今すぐFireworksに乗り換えるべき10の理由 | ベイジの社長ブログ

    Webデザインにおけるメインのデザインツールとして多く使われているPhotoshopとFireworks。我々の業界内において、どちらの方がデザインツールとして便利か、という議論がよく行われますが、いずれか一つしか使いこなしていないユーザによる比較論ではあまり意味がないでしょう。日頃から使いなれているツールの方が使いやすい、と感じるに決まっているからです。ここで参考になるのは、両方のツールを同等に使った経験を持ち、かついずれにも過剰なこだわりや愛着を持ってないデザイナーの声なのではないでしょうか。 実は私自身はもともとPhotoshopでWebサイトのデザインを作っていました。しかし以前勤めていた会社でFireworksを使っていた人が多かったため、あるプロジェクトで一時的にFireworksを使ってみたところ、色々な面でFireworksの方が優れていると感じ、Fireworksに乗り換

    Photoshopユーザが今すぐFireworksに乗り換えるべき10の理由 | ベイジの社長ブログ
    glat_design
    glat_design 2011/09/01
    Fw良く知るPs派は誰か同じ感じで反論してくれwww
  • Photoshop一括処理「バッチ処理」に関して失敗しない設定方法 |https://wp.yat-net.com/name

    Photoshopの画像解像度やカンバスサイズなどを複数のファイルに同一処理をさせる機能としてバッチ処理というものがあります。しかしこのバッチ処理の設定に少しクセがあり、イマイチ上手く行かなかったりするのでポイントを押させてブログにポストしておきます。 今回の設定内容 僕自身のブログ用に作成するので、以下の条件の自動処理をサンプルとして記述します。 画像解像度を幅426pxに統一 元画像を保存するフォルダと、一括処理後の画像を分けて保存する 今回解説で使用している環境はwindowsのphotoshopCS4 今回自動処理を行うに当たり、システム上に「処理用」というフォルダを作り、更にその中に「処理前」と「処理後」というフォルダを作成しました。一括処理する元の画像ファイルを「処理前」に入れておき、一括処理で解像度を変更したものを「処理後」フォルダへ保存するようにします。 自動化させる処理を

    Photoshop一括処理「バッチ処理」に関して失敗しない設定方法 |https://wp.yat-net.com/name
    glat_design
    glat_design 2011/07/20
    おおー、アクションは使ってたけどここまでやったことなかった。人のやり方はやっぱり参考になる
  • 細部にこだわったUIエレメントをPhotoshopで作成するポイント

    ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、

    glat_design
    glat_design 2011/07/05
    コリスさんではたびたびこういうの紹介されるけど、重要よねー、こういう質感の出し方って。横から見るとかまさにこういうこと
  • Photoshopの面倒なガイドを簡単に配置するエクステンション -GuideGuide

    Photoshopのガイドをドラッグして配置するのが面倒だな、という人にぴったり! 数値を指定して1クリックでドキュメントにガイドを配置するPhotoshopのエクステンションを紹介します。 GuideGuide [ad#ad-2] GuideGuideはPhotoshop CS4, 5に対応しており、数値を指定してカラムや溝のガイドを簡単に配置することができます。 GuideGuideのインストール ページ下部の「Download GuideGuide 1.0」からファイルをダウンロードします。 ダウンロードした「guideguide_1.0.zip」を解凍します。 解凍した「GuideGuide」を下記のフォルダ内に移動します。 Win: \Program Files\Adobe Photoshop \Plug-Ins\Panels\ Mac: /Applications/Adobe

  • イラストやWeb制作に使えるフリー素材を紹介 | 9search

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    イラストやWeb制作に使えるフリー素材を紹介 | 9search
    glat_design
    glat_design 2011/04/03
    Ps,Ai,Fw各種のUI素材からテクスチャ、パターン、ブラシまでを見やすく集めたサイト。商用利用可、条件なし
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
    glat_design
    glat_design 2011/02/18
    かなり濃い目。web制作初心者の基本として
  • 【公式】ハイローオーストラリア|新機能:ジャックポット・キャッシュバックプログラム¦HighLow.com

    ジャックポットについて特別なキャッシュバック取引約定後に、幸運なプレイヤーは最大100,000円のキャッシュバックが当たります。また、Highlowロイヤルティ・ステータスが高いほど当選確率・金額が上昇します。

    glat_design
    glat_design 2011/01/21
    Photoshopのパレット形式で書き出せる雑誌表紙の色抽出ツール
  • ディテールの強化に効くピクセルベースのPhotoshopのパターン素材

    年末に紹介したのとは異なるデザインを用意した、ピクセルベースのPhotoshopのパターン素材を紹介します。

    glat_design
    glat_design 2011/01/17
    使う可能性のありそうなドットパターン
  • Web Design KOJIKA17

    1年に1回は更新する Container Queriesの沼へようこそ2023-03-08UAスタイルシートとリセットCSSとは - 20232023-02-26脳内フィルターで見るCSSレイアウト2022-11-22劇薬の The New CSS Reset2021-07-20Sassを@importから@useに置き換えるための手引き2020-05-26 / 2022-09-29Container Queriesという手法 / CSS Advent Calendar 20192019-12-23レスポンシブwebデザインのコーディングでやってること2018-12-28宣言ブロックのCSS設計2017-07-18Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現)2016-05-21画像をCSSで斜めにマスクした時の知見2015-04-10CSSで2カラムを作ってみる201

    Web Design KOJIKA17
    glat_design
    glat_design 2011/01/10
    @kojika17さんのウェブデザインに関するブログ