当サイトのイラスト等は更生作業の一環として制作し 無料配布をしています。ご希望のイラストや3D素材が ございましたらメールフォームからご連絡ください。
次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像(SVG, PNG, JPG, GIF)の最適化と圧縮、画像の新しいフォーマット(WebPやAVIF)への変換と最適化が簡単にできるオンラインツールです。 WebPとAVIFは高い圧縮率を備えたフォーマットです。 WebPは簡単に言うとPNG, JPG, GIFの良いとこ取りのフォーマットで、24ビットのフルカラーをサポートしています。高画質の透過PNGのサイズが大きくなってしまうことやGIFアニメーションで色数が少ない悩みも解決します。IE以外の
Photoshopであらゆる被写体、画像全体を数クリックで金ピカのゴールドにする無料アクションを紹介します。 数クリックとしたのは被写体の選択操作で、金ピカにするのはわずか1クリック。 簡単に、目映いばかりの黄金エフェクトを楽しめます。 Free Photoshop Action to Turn Anything into Gold in Photoshop ダウンロードボタンをクリックすると、オーバーレイが表示され、それを閉じて、再度ダウンロードボタンをクリックすると、ダウンロードできます。 インストール方法は、Photoshopのアクションパネルで「アクションを読み込み」から、ダウンロードした「Spoon Graphics Gold Effect.atn」を指定するだけです。
画像から1クリックで簡単に背景だけを切り抜くオンラインサービス「Remove.bg」がPhotoshopに対応したので紹介します。しかも無料で利用できます! Photoshopのエクステンションとして利用でき、1クリックで背景だけを画像から切り抜くことができます。下記の切り抜きも1クリックだけです。 写真: ぱくたそ Remove.bg for Photoshopの使い方 Remove.bg for Photoshopのインストール Remove.bg for Photoshopの使い方 Remove.bg for Photoshopをさっそく使用してみました。 操作は1クリックだけなので、説明することがほとんどありません。 まずは、画像を用意します。
アメリカ3大美術館にも数えられているシカゴ美術館は、一度は足を運んでみたいシカゴの人気スポットです。そんなシカゴ美術館の公式ウェブサイトが最近リニューアルし、話題を呼んでいます。 このリニューアルに合わせ、シカゴ美術館内に展示されている、美術の教科書で見たことのあるような世界の名画52,000枚を、高画質で無料ダウンロードできるサービスが開始されたので、今回はご紹介します。どれも、クレジット表記なしで自由に利用できます。 世界の名画52,000枚を高画質で無料ダウンロードできるシカゴ美術館 シカゴ美術館(英: The Art Institute of Chicago)は、ニューヨークのメトロポリタン美術館、ボストンのボストン美術館と並んで、アメリカの3大美術館にも数えられ、モネやルノワールなど印象派コレクションは、フランス国外では最大規模と言われています。 今回のウェブサイトのリニューアル
最終更新日: 2022年10月3日 Photoshopで画像から人や物などのオブジェクトを除去する方法は、デザイン制作において重要なテクニックです。しかし、用途に応じてツールを使い分け、除去レタッチ作業を行っているというひとは、どれだけいるでしょう。 今回は、Photoshopの各種ツールを駆使した除去、消去テクニックと、いつその技を使うのがベストなのか、各サンプルと一緒にまとめてご紹介します。これらの方法を実践することで、写真に写り込んでしまった不要なモノを、2〜3分の短時間で、スピーディーに除去することができるので、フォトショップ初心者のひとにもオススメです。
こんにちは、ウタです。 突然ですが、画像のサイズって気にしたことありますか? サイズと言っても画像の容量の話では無く、縦横比の話です。 特に気にせずなんとなくで画像を貼り付けたり、加工している人も多いと思います。 しかし、画像のサイズにも"人が何となく美しく感じる"という比率があります。有名なのでは黄金比とか。 今回はそんな様々な比を紹介して、ブログに最適な画像のサイズを考えていきたいと思います! 様々な比 黄金比 白銀比 青銅比、白金比 じゃあ、有名なサイトの画像の比ってどうなってるの? You Tube はてな 写真 まとめ 様々な比 有名な比、美しいと言われる比にはそれぞれ名前がついています。有名なのは黄金比ですね。黄金比のように美しい比率には、それぞれの比が貴金属になぞられて名前がつけられています。 そんな貴金属比を紹介してい行きます! 各比率に応じて画像がついているので、なんとな
Photoshopを使った画像補正で無くてはならない機能が「トーンカーブ」です。感覚で使うこともできますが、最大限に活用するためには正しい理解が必要です。 今回はトーンカーブの基礎、活用方法をご紹介します。 これまでなんとなく使ってきた方、思い通りの結果にならないという方はぜひご覧いただき基礎を身につけてみてはいかがでしょうか。 1.トーンカーブとは トーンカーブの機能は多くのペイントソフトに付属していますが、ここではPhotoshopをベースに説明を進めていきます。 Photoshopにはトーンカーブ以外にもいくつかの補正機能が備わっています。中でも使いやすい機能の一つに「明るさ・コントラスト」がありますが、画像の質を低下しやすいデメリットがあります。 また、細かな部分や複雑な画像の補正にも不向きです。これに対して、トーンカーブは視覚、データの劣化をおこさずに細やかな補正ができます。 ト
コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」(複雑な背景バージョン) オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー(Command/Ctrl+J)したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
みなさんはAdobe Photoshopでどのように画像を書き出してますか? 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式(書き出し形式、クイック書き出し)は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し(従来)」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 [ファイル]→[書き出し]→[書き出
PCのブラウザ上から無料で使える、画像のリサイズや画質変更を一括で行えるサービスが「Bulk Resize Photos」です。Bulk Resize Photosはウェブサービスですがファイルをアップロードする必要はなく、画像加工は全てブラウザ上で行われるので、無駄に通信量がかさむといったこともありません。 Bulk Resize Photos http://bulkresizephotos.com/ 「Bulk Resize Photos」の使い方は非常に単純で、加工したい画像をドラッグ&ドロップで赤枠部分に移動させます。 加工画面はこんな感じ。「Scale」からは画像を拡大縮小可能で、赤枠部分に元画像の何%のサイズに拡大縮小するのかを入力すればOK。 「Longest Side」をクリックすれば画像の長辺を指定可能。画像の縦横比は元画像のものを保ったままリサイズされます。 「Widt
2018年11月12日 CSS Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード(描画モード)」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです!今回はそんなCSSブレンドモードにフォーカスしてみようと思います! ↑私が10年以上利用している会計ソフト! 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。 ブレンドモード一覧 基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat;
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
By takuhitofujita 写真を使ったデザインにおいては、単に優れた写真を使えばいいわけではなく、「どんな写真を」「どのように配置するか」によって読者に与える印象が大きく変化します。プロが作る雑誌やウェブサイトではそんなプロの手法やテクニックがふんだんに使用されているわけですが、そんなノウハウを集めたインフォグラフィック「写真を使うデザインで最も重要な5つのルール」を、クレムゾン大学でビジュアルコミュニケーションを教えるカーティス・ニューボールド教授が公開しています。 Top 5 Rules for Designing with Photographs http://thevisualcommunicationguy.com/2015/02/02/top-5-rules-for-designing-with-photographs/ ◆ルール1:解像度の低い写真は絶対に使わない
Twitterでお気に入りのアカウントがツイートした画像のみを一覧で表示し、画像をワンクリックでダウンロードしたり、ツイートされた大量の画像をまとめてZIP形式でダウンロード可能なサービスが「timg」です。 timg: Twitter 画像一覧 & まとめてダウンロード https://timg.azurewebsites.net/ 上記URLを開き、Twitterのアイコンの下に表示されている検索窓に、画像を検索したいTwitterアカウントのユーザー名を入力し、虫眼鏡のアイコンをクリックします。 検索したアカウントが投稿した画像を一覧で表示。たとえばアニメ「ジョジョの奇妙な冒険」の公式アカウントだとこんな感じ。 表示されている画像にポインタを合わせて下向き矢印が付いているアイコンをクリックすると、該当の画像をダウンロードしてくれます。同機能はChromeおよびInternet Exp
どうも、やなぎさわです。やたらクオリティが高い素材サイトを偶然見つけました。質感のある写真素材〜iPhoneなどのモックアップ画像、Photoshopのエフェクト、ブラシ、さらには、Illustratorデータのロゴやテンプレートなどの素材が詰まっているサイトです。 そのサイトの名は「Dealjumbo.com」といいます。有料素材もありますが、無料で配布している素材も多く、デザイナーさんやそうでない方でも資料や、参考イメージなんかに使えると思いますので、そちらをご紹介します。 無料の素材数は、現在約200個あり、どんどん増加しているようです。 では、実際にそのサイト内にはどのような素材があるのか見てみましょう。 ぜひ覗いてほしいサイト「Dealjumbo.com」 TOPページでは、早速素材の値段などがでていますが、無料でゲットできるのは、メニューバーにある、「Freebies」からいけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く