はてなブックマーク

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

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で開きます。 すると、ビデオグループのレイヤーが追加されます。 メニューバ

人物写真を絵画や油絵の肖像画のように加工したい場合にはphotoshopのフィルターを活用することで思い思いの画風に仕上げることが可能です。 ここではカットアウトと油彩フィルターを併用し指先ツールでなじませることで、わざとらしさを残さずに肖像画風にする方法を解説します。 指先ツールでなじませるのは手間とちょっとした技術が必要になりますが、元々写真だったとは思えない仕上がりにするためにはこのひと手間を惜しまないことがポイント！ Photoshop CS6使用写真素材 人物写真を肖像画風に仕上げる方法背景を2つ複製し最前面のレイヤーを一旦非表示。 2つ目のレイヤーにフィルターのカットアウトをかける。 最前面のレイヤーにフィルターの油彩をかける。 プレビューで確認しながら調整。 油彩をかけた最前面レイヤーの不透明度を60％に落として、2つ目のレイヤーと統合。 カットアウトで浮き出た色の境界線を指

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

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

HOME ブログ WordPress , 【PR】 女性の美を追求したエステ・サロン・スパなどの店舗集客に最適化されたWordPressテーマ【LOTUS】の使いやすさ ホットペッパービューティーなどのポータルサイトでは広告料がかかるため、資本力のある大手サロンには太刀打ちできないし、競合も多くてなかなか思うように集客することができません。 そのため、最近では「簡単に更新することができてSEOにも強いと言われているWordpressでホームページを作り、自社で直接集客したい。」と考えている、サロン運営者も増えているようです。 特に高級スパ、ヘアーサロンやネイルサロン、アロマテラピー、フェイシャルエステにリラクゼーション、フィットネス、ヨガ、ピラティスなど・・ 女性の美と健康を提供するサービスを運営する際には、香りや照明、雰囲気など”日常から解放される楽園のような空間”を演出することは、とて

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

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

HOME ブログ WordPress , 【PR】 , セルフブランディング マルチデバイス対応のWordPressレスポンシブテーマ【VENUS】の美しさと有効的な使い方 最近ではスマホユーザーが多くなり、レスポンシブは必須とされています。 しかし、一言でレスポンシブと言っても、単純にデバイスの画面サイズに合わせて横幅が縮むだけで、スマホ表示にした途端にデザインの魅力が半減してしまうことがあります。 そのためパソコン、スマホのどちらの表示を優先（妥協）するべきか？悩ましいところですが・・ そんな悩みを一掃し、パソコン、スマホ、そしてタブレットなど、どのデバイスにも依存せずに、美しく最適化されたレイアウトを実現したWordpressテーマ【VENUS】がTCDから登場しました。 VENUS (tcd038) デモサイトを確認する デバイスに依存しないレイアウトの美しさパソコン タブレット

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

あらゆる人気ブログからパクリまくってるWordPressブログが、も～ガサツすぎて（爆）2016.06.10 ブログにアクセスが集まり、多くの人の目に届くようになると「記事がパクられる」ことがあります。 実際に、スリームデザインの記事もちょくちょくパクられるのですが、「まぁ、他人の記事をパクったところで、検索エンジンからの評価を下げて自滅するだけ」なので、普段は「記事を削除してください。」とメールするくらいで、あまり気にしないのですが・・ パクリ方があまりにもガサツすぎてあらゆる人気ブログから記事をパクリまくってて、しかもそのパクリ方がガサツすぎて、、突っ込む気力すら失せてしまうようなブログを見つけてしまったので、やむを得ずご報告します。 （スリームデザインでは基本的に、「故意に誰かを批判して貶めるようなことは書かない」といったルール付けをしているのですが、本人にこの記事が届いて気持ちを改

HOME ブログ WordPress , 【PR】 , マーケティング WordPressで個人のネットショップが簡単に作れるTCDテーマ【BLOC】の有効的な使い方 ネットショップを運営したいと考えた際に、いちから作ろうとすると数十万円の費用がかかります。 最近では BASE や Stores.jp など、簡単にネットショップを開くことができるサービスも出てきていますが、集客などのマーケティング視点を考慮すると、やっぱりWordpressで構築したいと考える人も多いようです。 ここでは、商品販売やECサイト、プロダクトの販促にも適した汎用性の高いWordpressのTCDテーマ【BLOC】を活用し、オンライン決済システム【SPIKE】（初期費用・月額費用も不要、月間売上が10万円まで無料）を設置する流れを解説します。 BLOC (tcd035) デモサイトを確認する WordPressの

iphoneを筆頭に、わすか数年で爆発的にスマートフォンが普及したことで、Googleもこれからより一層、スマホに最適化されたサイトやブログの検索結果を優遇（モバイルでの検索に対して）するモバイルフレンドリーを強化していくことは必然だと言えます。 今求められるマルチデバイス対応のUXしかし、デザイン性に優れたWordpressテーマを使用しているにも関わらず、スマホ用にレスポンシブ対応した途端、どれも同じようなレイアウトに落ち着いてしまい、「差別化ができない・・」という悩みを持っているブロガーも多いはずです。 そんな中、パソコン、タブレット、スマホ、どのデバイスにも依存しない、マルチデバイス対応のUX（ユーザーエクスペリエンス）を実現した、史上最高レベルのwordpressテーマ【IZM】がTCDからリリースされました。 （※ ↑ はPCのchromeブラウザで表示した再現イメージをGIF

HOME ブログ フォトショップ , 画像加工 「ちょっと待って！」Photoshopの初心者にありがちな間違った5つの使い方とスキルが飛躍する解決策 Photoshopの優れた機能を使いこなせるようになるとさまざまな表現が可能になり、デザインや作品作りが楽しくなります。しかし間違った使い方をしてしまうと、途端に不自然な加工になってしまうことがあるので注意が必要です。 Photoshopでありがちな5つの間違った使い方①：めちゃくちゃスタイルを良くしてしまう②：自動選択ツールを使って1発で切り抜こうとする③：立体感を演出するためにドロップシャドウを多用する④：オーバーレイが大好き！⑤：画像の縦横の比率を気にせず拡大して配置してしまうここでは、Photoshop初心者にありがちな5つの間違った使い方とその解決策を紹介するので、有効的な使い方を身につけてスキルを飛躍させましょう。 ①のほうが高

Macに搭載されている高解像度のRetinaディスプレイで表示した際、ブログのロゴマークが”ぼやけて”見えるときの対処方法を教えてくれている記事がありました。 【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像の解像度アップ この記事を見たので、早速MacBOOKを開いて確認してみたところ、最初は「ん～たしかにぼやけているけど、こんなもんなんじゃないかな？」と思っていたのですが、とりあえず記事のとおりに対処してみたところ・・ 「やべっ、全然違うっ！」（キャプチャー画像50%） ようするに、Retinaディスプレイは解像度が2倍になっていて、通常のディスプレイで表示している画像が2倍に引き延ばされて表示されているので、【ロゴマークも2倍の大きさで作成して、通常の表示サイズに調整すればOK！】ってことらしいです。 こういう微細な部分に気がついて

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

HOME ブログ WordPress , 【PR】 こんなWordPressテーマなんて初心者には絶対に使って欲しくないっ！TCDテーマ「VIEW」に一言物申す。 投稿記事のアイキャッチ画像まで、スライドショーで読者をもてなすTCDテーマ【VIEW】について一言物申したい。 トップページにアクセスした際に、わずかな時間差でギャラリーが並ぶ視覚効果が実に心地良い・・サムネイルにカーソルを合わせたときのロールオーバーが表現が自然にクリックを誘発してくる、、 記事下のナビゲーション画像までスゥっとスライドして、”ぴよーん”って矢印が動くもんだから、思わず他の記事も読んでしまうじゃないか。。 このあたりの”視覚的・体感的デザイン”はさすがとしか言いようがない。 いや、言いたいことはそんなことじゃない、、 TCDテーマのデザイン性については語るまでもなく、実際にデモページを見れば体感できますよ。 V

必読！安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書7選】2016.02.23 「あぁ、、私ももっと早くこの本を読んでおけば、朝4:00に起きて日給6000円の日雇いアルバイトに行くハメにならずに済んだのに・・」 現在は、個人でも経理は会計ソフトを使い、マーケティングはWEB上のツールやサービスを活用し、営業活動でさえソーシャルメディアやブログなどで情報を発信することができる時代になっているし・・ インキュベーター（起業に関する支援を行う事業者）の後押しによってか、個人事業レベルであればスタートアップの敷居は格段に下がり、起業ブームに拍車がかかっているように感じます。 しかし、安易に勤めている会社を辞めて起業ブームに乗っかる前に、起業1年目で約40%、2年目で15%、3年目で10%、ようするに3年以内に70%が廃業してしまう、というデータがあることも知っておかな

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

WEBデザインなどをしていると画像の角を丸くしたいケースはよくあります。 また、自分で撮影した写真をブログなどに載せるときにも「角を丸くしたいな～」なんてこともありますが、その際にはほんの少し工程が変わるので、ここではPhotoshopで角丸の画像を作る2通りの工程を解説します。 初心者でも60秒くらいでマスターできるので、覚えておくと便利です。 WEBデザイン用の角丸画像の作り方Photoshopを立ち上げたら、ファイル 》新規 でウィンドウを開きます。 任意のカンバスサイズを入力してOKをクリック。（ここでは幅1200px・高さ800px・解像度72pixel/inch） 長方形ツールを右クリックするとさまざまな形のツールが出てくるので、角丸長方形ツールを選択。 オプションバーでシェイプを選び、丸みを任意の数値（ここでは20px）に変更します。 ドキュメントウィンドウ上にカーソルを持っ

歓楽街を歩いているとBARやライブハウスなどのネオン看板が夜の街を彩っています。ここでは10分程度の工程でPhotoshopでネオン管が光っているような文字の作り方を解説します。 動画解説はこちら Photoshopでネオン管が光っているような文字の作り方背景を複製し、新規レイヤーに任意のテキストを入力（OPEN）。 複製した背景にレイヤーマスクを追加し、描画モードを通常から乗算に変更。 レイヤーマスク部分に不透明度や流量を調整した黒色のブラシでテキストの周辺をなぞるように塗ります。 テキストレイヤーにレイヤー⇒レイヤースタイル⇒境界線を選択しサイズを調整。（色はテキストと同色） テキストの塗りを0にして境界線だけを表示させます。 テキストを複製して非表示にし、複製元のテキストを右クリックでレイヤースタイルをラスタライズ。 テキストを複製して非表示にし、複製元のテキストを右クリックでレイヤ

Photoshopの基本的な使い方の解説はたくさんありますが、デザインの現場では基本的な使い方を自分なりに応用し、工夫しながら活用していくことで、精一杯思い通りの表現することが可能になります。 ここでは即実践に役立つ7つのテクニックを”ポイント”を交えて紹介します。（※画像をクリックするとチュートリアルが確認できます↓） 1.思い通りの作品を作るためのPhotoshopの切り取りテクニック