便利ツール– tag –
-
【photoshop】ドロップレットで画像をwebpに変換する【効率化】
photoshopでwebp変換をひとつひとつするのは非効率的なのでアクション登録して、 さらに【ドロップレット】でアプリケーション化してしまい、効率UPしてみます！ アクションについて詳しくは以前の記事を参照ください 【Photoshop】自分でアクションを登録... -
mp4のファイルサイズをWEB用に圧縮！【Media Encoder】
WEBにmp4の動画を載せる場合、高画質なままだとページの読み込みに時間がかかり、ユーザーの離脱、SEO評価の低下などが想定され、あまりよくありません。 今回はmp4ファイルをAdobe Media Encoderで圧縮する方法をご紹介します。 ※Adobe Media Encoderは20... -
【CSS】すぐ使えるマテリアルデザイン作成ツール
今回は制作時デザインの引き出しとして、cssで簡単に作成できるマテリアルデザインツールをまとめてみました。 【グラスモーフィズム】 グラスモーフィズムとはすりガラスを通して覗いたような背景のぼかしが特長のデザインです。 iPhoneやmacなどで主に使... -
photoshopで背景を簡単に伸ばす！
画像の背景が足りない時、背景を簡単に伸ばす方法を紹介します。 【1.「コンテンツに応じる」で簡単に引き伸ばす】 切り抜きツールで拡大する時、上のコンテンツに応じるにチェックを入れたら、足りない部分を塗ってくれます! 特徴： 1.背景とコンテンツは... -
グラデーションを簡単作成！NOISE & GRADIENT
WEBサイトで多く見るグラデーションのあしらいを、簡単作成できるサイトを紹介します。サクッと作成でき、サイト内で簡単に画像保存もできます。 【NOISE & GRADIENT の使用方法】 まずはこちらのURLから飛んで画面を見てみましょう NOISE & GRADI... -
【Figma】最強のデザイントレースプラグイン！HTML To Figma
【HTML To Figmaとは】 「HTML To Figma」とはFigmaのプラグインで、webサイトのURLをコピペするだけでデザインがトレースされるという優れものです！ 公式サイト https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-Rea... -
【WordPress】WebサイトにInstagramを表示するプラグイン「Smash Balloon Social Photo Feed」その２
以前の記事からバージョンアップしてます 主にカスタマイズなどが見やすくなってますので、新しく導入する場合は最新バージョン導入するのが良いと思います http://mtrad-blog.com/wp/2021/10/25/post-2610/ 【使い方】 1インストールする WPプラグインサ... -
Photoshopのデータを一瞬で整頓する方法
【すべてのグループとレイヤースタイルを閉じる】 Ctrl+Alt+クリック グループの矢印▼を「Ctrl+Alt+クリック」で、すべてのグループとレイヤースタイルを一括で閉じられます。 不要なレイヤースタイルを簡単削除 下記参考サイトからスクリプトをDLしてきま... -
ブラウザ判定が簡単にできる！【Modernizr】
【1.Modernizrとは】 【Modernizr】…JavaScriptライブラリ https://modernizr.com/ 例えばWEBサイト作成時、Webp未対応ブラウザではjpgを表示したい、というときがあります。 Modernizrを使えばWebpに対応しているブラウザで閲覧しているかを判定して、HTM... -
PhotoshopからCSSを生成するエクステンション「CSS3Ps」
Photoshopで作られたWEBデザインがそのままコードになってくれたらな、と思う事があります。 そんな願いを少し叶えてくれるのが「CSS3Ps」です。 【1.CSS3Psのダウンロード】 Photoshopのエクステンションに「CSS3Ps」を追加します。 まずはダウンロードし... -
Photoshopで使える小ワザ3選
毎日使っているPSDですが、 まだまだ知らない機能やショートカットキーがたくさんありました。 今日は最近知った使える機能と 役に立たない面白機能をご紹介します。 PSD以外から色を抽出する方法 色の抽出には[スポイトツール]を使いますが、PSD以外のと... -
【Xd便利機能】ドキュメントアセットでデザインを管理する
今回は最近知ったXdの「ドキュメントアセット機能」について紹介したいと思います！ Xdを作業するときつい左側をずっとレイヤーパネルにしちゃってこの機能を全く使っていなかったのですが他の人が作ったXdデータを見させてもらった時にこの機能を使ってい... -
【scss】初心者向け！DreamWeaverでscssを触ろう！
最近やっとscssを触る機会がありDreamWeaverでやってみたら思っていたより便利で簡単に触ることができたので今回はそれを共有したいと思います！ 【用意するもの】 DreamWeaverでscssを使うために用意するものは２つです！ それはDre... -
【Photoshop】忘れてしまった便利な基本テクニック
長いことPhotoshopを使っていますが、最初に授業や教本で学んだ基礎的な部分をすっかり忘れているなあと最近多々思うようになりました。 そこで今回は、私が実際に忘れてしまっていた基本的なことを復習と備忘録のために紹介しようと思います。 【... -
【レイヤーを選択するだけ】Photoshopのテキストレイヤーの内容をクリップボードにコピーできるスクリプト
WEBデザインをPhotoshopで作成し、コーディングの際psdデータからテキストをコピペするという事があるのではないかと思います。 しかしコピペするだけの作業でも、photoshop内だと案外手間のかかる作業だったりします。 そこで今回ご紹介するのが、“レイヤ... -
【Photoshopの便利ツール】psd上で情報を共有できる「注釈ツール」
制作をする上で自分が作ったpsdデータを他の人に共有することが多々あると思います。 今回は、そんな時に知っていると役に立つ「注釈ツール」について紹介します。 【注釈ツールとは】 注釈ツールとは、名前の通りpsdデータ上で注釈... -
複雑な画像もサクっと！背景画像切り抜きツール「remove.bg」
こんにちは。 みなさんは、Photoshopを使った写真の切り抜き作業などで、うまく行かなかったり、時間がかかって苦労したことはないでしょうか？ 今回は、そんな時の便利ツール「remove.bg」をご紹介したいと思います。 【使い方】 remove.bgへアクセス htt...
1