「Photoshopは楽しい！」センスのある人であれば、好きな画像素材を切り取ってペタペタを貼り付けていけば、それだけで個性的な作品が作れます。 でも、平面的なフォトコラージュだけではなく、そこに立体感や空間を表現することができるようになると、リアリティのある世界観を創ることができて表現の幅も格段と広がる。 ってことで、ここでは・・ 立体感を表現するための基礎知識と光と影をコントロールしながら、リアリティのある世界観を創るために私が意識していることを共有したいと思う。 立体感を表現するための基本的な考え方（デッサン編）目の前に平面的な「〇」があったとする。この「〇」を立体的な球体にしたいと思ったときに、無意識に〇の輪郭部分に強めの影を描いてしまう人が多い。 これでも、なんとなく球に見えなくもない。でもデッサン経験が豊富な人は「対象物をよく観察する」ことの大切さを知っている。 例えば、テーブ

Photoshopで毛がフサフサとした猫ちゃんなどの動物の画像素材（背景が白）を切り取ろうとしても・・ これがなかなかうまくいかず背景となじみません。 でも、そもそも画像を切り取る目的は背景と合成するためですよね？ そんなときは「キレイに切り取りをしよう！」と考えるのではなく、キレイに合成するための「描画モードを活用した合成テクニック」を身に付けましょう。 ある程度Photoshopになれている人であれば、こちらの動画を見ればコツがわかると思います↓ キレイに合成するためのポイント ・0：45～境界線ギリギリではなく少し内側まで深めに切り取る ・1：08～切り取った画像と切り取っていない画像の2つをドロップ ・1：35～背景が白い画像の描画モードを「乗算」に変更 ・1：47～切り取った画像を前面に表示（これで結構なじむ） ・2：17～空間を演出するために背景をぼかす（距離＝強く） ・3：2

HOME ブログ webデザイン , WordPress , フォトショップ Photoshopで画像を合成（フォトコラージュ）してWordPressで空間を表現してみたらいろいろできそうな予感がプルプル。。 Photoshopで画像を合成（フォトコラージュ）してWordPressで空間を表現してみたらいろいろできそうな予感がプルプル。。2018.01.15 Photoshopに使い慣れてくると、自由に画像を切り取ったり、合成したり、色調を補正しながらいろいろな表現ができるようになるので、もしWordPressでブログとかやっていれば、自分の作った「フォトコラージュ作品」を公開したいものです。でも・・ フォトコラージュって、せっかく複数のレイヤーで構成されているので、単なる1枚の画像作品として公開するんじゃなくて「なんとか空間とか表現できないものだろうか？」と考えていたところ・・ 【D.e

Photoshopは画像加工や写真のレタッチに適したデザインソフトですが、実はPhotoshopひとつ使えるだけで、WEBデザインやロゴマーク、ポスターなどあらゆるデザインが可能になります。 これまでスリームデザインでは、Photoshopを使ったさまざまなデザインチュートリ... 調整レイヤーで彩度とコントラストを強めるPhotoshopでミニチュア風の加工をしたい画像を開きます。 調整レイヤーの「色相・彩度」を追加して彩度をグーっと高めます。 調整レイヤーの「トーンカーブ」を追加してコントラストを強めます。 調整レイヤーの「レベル補正」を追加してシャドウとハイライトを適度に調整。 画像をシャープにするフィルター 》シャープ 》アンシャープマスク を選択。 量（A）を高めます。 チルトシフトを適用するチルトシフトはぼかしをかける技法ですが、直接画像をぼかしてしまうと後から調整できなくなっ

Photoshopはウェブデザインにおいてトップクラスの画像加工ソフトウェアであり、初心者から多くのプロフェッショナルにまで愛用されています。その機能が多岐にわたるため、専門家でも全機能を自在に使いこなすのは難しいほどなのですが、Photoshopの提供元であるAdobeが初心者向けにPhotoshopの使い方を説明するチュートリアル動画の再生リスト「3, 2, 1... Photoshop!」をYouTubeで公開しています。 3, 2, 1... Photoshop! - YouTube 「3, 2, 1... Photoshop!」にはPhotoshopの写真加工ツールや特定の機能の使い方を説明する以下の7つのムービーがまとめられており、2分30秒～5分程度でサクっと視聴できる内容になっています。英語での説明となりますが、実際にPhotoshopを動かしながら説明してくれるので、英語

MacなどのRetinaディスプレイや、Windowsの高解像度モニターの新しいパソコンにPhotoshop CCをインストールして起動しようと思ったら「なぜかメニューやツールバーが異常に小さい」ことがあります。（アップデートなどの何かしらの影響で突然インターフェイスが小さくなることがある） そんなときは、Photshopのメニューバーにある【編集】→【環境設定】→【インターフェイス】をクリックしてUIスケールを【200%】にしてOKをします。 この変更は再起動しなければ有効にならないため、一旦Photoshopを閉じて、もう一度立ち上げればいつものPhotoshopに出会えるはずです。 Photoshopのインターフェイスを変更する方法Photoshopを立ち上げようと思ったら「あれっ、なんか小さくない？」 実際に立ち上がって、画像を開いてみてもやっぱり小さい。 とりあえず、Photos

HOME ブログ webデザイン , フォトショップ , ブログ 「コレがやりたかった！」GIFアニメ（動く画像）のPCモックアップ画像の作り方【Photoshop編】 JPGなどの画像をパソコン画面にはめ込んだモックアップを作りたい場合には、MockDropなどのサービスを使うことで簡単に作れますが ⇒ わずか10秒でパソコン画面のはめ込み画像が作れるMockDropの使い方 しかし、GIFアニメーション（動く画像）のモックアップ画像が作れるサービスは今のところ無さそうだし（私が知らないだけかも）、作り方を教えてくれる記事もぜんぜん見つからない。。 でも「コレができると記事コンテンツの表現の幅が俄然広がる」ので・・ B-Roll by Videezy! ここではPhotoshopを使ってGIFアニメをパソコン画面にはめ込んだモックアップ画像の作り方を解説します。ちょっと技術が必要になりま

「ブログの記事内に”動きのある画像”を貼りたい」ときがありますが、実はPhotoshopは写真の色調補正をしたり、画像を編集するだけではなく、MP4などの動画をGIFアニメーションに変換することも可能です。 ただ、GIFアニメーションは、時間やサイズが大きくなるほど容量も大きくなってしまうので、基本的に10秒以上を超える動画をGIFアニメーションに変更するのはおすすめできません（不可能ではない）。 そのためここでは、「ブログ記事やSNS、WEBサイト上に貼るのにおすすめ」な動画の一部分をリピートしたGIFアニメーション（5秒程度）をPhotoshopで作る方法を解説します。 Photoshopで動画をGIFアニメーションに変換する方法GIFアニメーションに変換したい動画（ここではMP4動画を用意）をPhotoshopで開きます。 すると、ビデオグループのレイヤーが追加されます。 メニューバ

HOME ブログ 3分の話 , 【PR】 「盲点って本当に見えていないの・・？」読書嫌いな私がむさぼり読んでしまった【進化しすぎた脳】が面白いっ！ 右目を閉じて・・ 左目で右側の白い点を見ながら、パソコンのブラウザから顔を前後に動かしていくと30～50cmくらいのどこかで、左側の黒い点が消えるっ！（スマホだったら結構むずかしいけど5～10cmくらいのところかな？ぼやけるけど、たしかに消える場所がある。） これ、理科だったか、図工だったか、もしくは保健体育だったか？何の授業だか忘れたけど、小学生の頃にやった記憶がある。。 目から入ってきた視覚的な情報（光）は、眼球の中にある網膜が受け取り、視神経を伝って脳へ送られる。その視神経が束になっている部分には、網膜に穴が空いているから、ココの部分だけは見えない。 そうするに、これが「盲点」ってやつですね。 そう、私は今まで「盲点」っていうのは、文字通

Photoshopには写真を補正するだけではなく、デザインに必要とされるさまざまな便利な機能があります。しかし、機能の使い方だけを覚えてもなかなか実践に活用することはできません。 なので、ここでは「デザインの現場では、どの機能をどのように使っているのか？」がイメージできる、Photoshopの実践的な使い方が学べる日本語解説付き動画をまとめました。 見ているだけでもスキルアップにつながるので、実践に役立ててください。 「特訓Photoshopプロのテクニック教えます！」というすごいタイトルのフォトショップの本について：スリームデザイン著 部分的に色を変えたいときの【色の置き換え】の使い方 画像や素材の一部分だけ色を変えたいときには、Photoshopの【色の置き換え】がとても便利！ この動画では、同系色をいっぺんに変える方法だけではなく、一部分だけ色を変える方法と、一部分を残してモノクロに

Photoshopで立体的なGOLD（金色）の文字を作る方法はいくつかありますが、ここでは・・ べベルの調整だけでGOLD（金色）の文字を表現する方法と、グラデーションを組み合わせる方法を解説し、最後にはPhotoshopの3D機能を使って立体的なGOLD（金色）の文字を作るための一連の過程を動画で解説しています。 13：12の解説動画を見ながら”一連の作業”を経験することで、Photoshopのスキルアップにつながるので、ぜひブックマークして時間のある時にチャレンジしてみてください。 べベルの調整だけでGOLD（金色）の文字を表現する幅:1200pixel、高さ:800pixel、解像度:72pixelの背景を用意します。 テキストカラー【#f7b934】で任意の文字を入力し、レイヤースタイルのベベルとエンボスを選択。 ベベル（内側）を選択し、各項目を ↓ 画像のように調整。（※【角度】

追記：macOS 10.13 High Sierra でも使えます！ 本日(2017/09/26)，macOS 10.13 High Sierra がリリースされました。本記事で紹介している「偽装フォルダ法」は，High Sierra でも有効なようです。 追記：検証結果 本記事の方法で，Photoshop / Illustrator の CS 3～6 が全て Sierra で使用可能になる模様です。 また，報告（リンク切れ）によると，Flash 関係以外の CS6 アプリは基本的に全て動作するそうです。 Adobe CS6 Master Collection ○ Photoshop CS6 ○ Illustrator CS6 ○ InDesign® CS6 ○ Acrobat® X Pro ○ Dreamweaver® CS6 ○ Fireworks® CS6 ○ Adobe Premi

Photoshopで【色の置き換え】を使うと部分的に色を変えることができます。 色を変えたい画像をPhotoshopで開きます。 イメージ 》色調補正 》色の置き換え を選択します。 色の置き換えウィンドウが開いたら、色を変化させたい部分の色をスポイトで抽出します。 許容量や色相、彩度等を任意の数値に調整。 これで部分的に色を変化させることができました。 デザインの現場で使える実践編はこちらを参考にしてください↓ スリームデザイン4,762,601 views1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインとマーケティングと玄米ご飯。 フリーランス時代に独学で身に... プロフィール

Photoshopで点線を書く方法はいくつかありますが、直線や曲線、図形を囲ったり、ある程度自由な点線を書きたい場合にはシェイプの使い方を覚えておくだけで、さまざまな点線を書くことができるようになります。 ここではシェイプを使って、直線・曲線・図形を囲う点線の書き方を解説するので、用途に沿ったものを参考にしてみてください。 直線の点線を書く方法ペンツールを使って、ツールオプションバーのシェイプを選択しラインを引きます（Shiftを押しながらラインを引けば直線になります）。 ツールオプションバーの【塗り】をカラーなしに変更します。 続いて、【ストローク】を任意のカラーに変更。 ラインの太さを任意の数値に変更（ここでは1pt）して、ストロークオプションを選択すれば点線が完成します。 応用作成した点線レイヤーを新規レイヤーにドロップして複製してみます。 移動ツールで移動すれば2本の点線が完成しま

「Photoshopで部分的に色を変えたいっ！」と思ったとき、単純な形状のものであれば変更したい場所を【選択ツール】を使って選択することで、任意のカラーに調整することができます。 しかし、選択したい色が複雑に散らばっている場合には、Sfiftを押しながらポチポチと作業しなければならなかったり（これが結構面倒くさい）、なかなか思い通りに選択することができず、頭を悩ませることがあります。 ここでは、Photoshopの【色の置き換え】を活用して、わずか10秒で服の色を変える方法を解説します。 また応用編として、【服の一部分だけ色を変える方法】と【服の一部分を残してモノクロにする方法】も解説し、最後に3:32の動画ダイジェストも用意しているので参考にしてみてください。 わずか10秒で服の色を変える【色の置き換え】の使い方 Photoshopで画像を開き、イメージ 》色調補正 》色の置き換え をク

Photoshopでクオリティの高い加工が可能なプラグインのNik Collectionが無料になったって！？ もともとは日本円で約6万円ほどだったそうですが、これは使わない理由はないということで早速インストールして使ってみたらマジでやばかった、、 Nik Collectionってどんなことができるの？？ PhotoshopにNik Collectionをインストールする方法Nik Collectionへアクセスし、【Download now】をクリック。 ダウンロードした【nikcollection-full】をクリック。 私は日本語オンリーなのでもちろん日本語で。。 次へ、次へ、 対応ホストアプリケーションを選択、ここでは【Photoshop CS6】にインストール。 Nik Collectionの使い方Photoshopを再起動すると、【Selective Tool】というウィンドウ

Photoshopで「画像の中にある●●を消す」といった作業は画像編集でよくある作業だと思います。 togetterで「初心者のPhotoshop加工はプレデターが生まれる→「例えが秀逸」「あるある」と腹を痛めるTL」というまとめがありました。その最初のツイートがこれ。 僕がPhotoshopを教えていて一番好きな瞬間は、「○○を消せ」系の初心者向け課題で、必死で作業すればするほどプレデターを次々に生み出して絶望していく生徒に「もうお前の地球は終わりだ」と講評することです。 pic.twitter.com/gEpXGVx7xo ? ﾚｲﾆｰ氏 (@moeebu) 2016年3月8日 おもしろい例えですね。スタンプツールで補正をすると、同じパターンが連続してしまうパターンです。 Photoshopで●●を消す作業の基本はスタンプツールですが、スタンプツールでチマチマ消す時間もない！という方に

Photoshopはデザインに欠かせない便利なツールですが、そのまま使っているだけではもったいないです！ Photoshopでの作業がさらに捗る便利なプラグイン・機能拡張を紹介します。 ここで紹介するものは、当方の日本語環境（Win/Mac, CC 2015）で利用しています。 よく使うドキュメントはテンプレートとして管理 レイヤー数が多くても目的のレイヤーにすぐにアクセス ガイド引きの定番「GuideGuide」は大幅バージョンアップ ガイド引きは「QuickGuide」も欠かせない スクリーントーンや集中線を生成する「Comic Kit」 磨りガラスのようなエフェクトを与える「Blur Like Jony」 カラー・テキスト・フォントサイズなどに変数が使える「Ditto」 ガイドライン作成に欠かせない「Ink」も大幅バージョンアップ 複数の要素を変形させる時に位置はそのままで レイヤー

Photoshopで文字に影を付けるには、レイヤースタイルのドロップシャドウを適用すればいいだけなのですごく簡単です。しかし、毎度毎度ただ影を付けているだけだと単調な表現しかできません。 カッコ良いロゴをデザインしたり、文字を加工して立体的なタイポグラフィーなどを作りたい場合には、影の付け方をしっかりマスターしておく必要があるので、ここでは・・ ① ドロップシャドウの基本的な適用の仕方② 文字の境界線に影を付ける方法③ 文字を切り抜いて影を付ける方法を解説していきます。 1つ、2つバリエーションを増やしただけで一気に表現の幅が広がり、自由に組み合わせて応用することができるようになるので、まずは基本的なドロップシャドウの適用の仕方を覚えましょう。（背景素材は unsplash から探しました） ドロップシャドウの基本的な適用の仕方任意のテキストを入力します。（テキストを中央に配置したい場合は