業務効率化– tag –
-
【photoshop】ドロップレットで画像をwebpに変換する【効率化】
photoshopでwebp変換をひとつひとつするのは非効率的なのでアクション登録して、 さらに【ドロップレット】でアプリケーション化してしまい、効率UPしてみます！ アクションについて詳しくは以前の記事を参照ください 【Photoshop】自分でアクションを登録... -
【Photoshop】2023アップデート！より高度な削除・塗りつぶし
Photoshop2023 (V.24)がアップデートし、AIを使用したより高度な塗りつぶしが可能になったのでご紹介します 【基本操作】 単純な対象物・背景だとこのまま綺麗に塗りつぶすことが可能です 選択ツールで囲む 右クリックで「選択範囲を削除して塗りつぶし」 ... -
【プラグイン】AddQuicktagで記事の作成を簡単に！
記事作成を簡単に装飾増やすプラグインの紹介します 【プラグインAddQuicktag】 投稿画面でタグを増やすプラグインです！ 投稿画面のボタン↓ 設定画面で入力 設定＞AddQuicktagで入力 cssで編集したい場合は開始タグにクラス名をつけます。また、反映させ... -
【OGP】のOGPのSNSへの設定を即座に反映する！
サイト更新をした際に、SNSのOGP画像を変更したが…「新しいOGP画像変わらない！」と困った事はありますか？ 私も困った事があります。更新の時完璧な状態で、クライアント様にお渡ししたいですよね！ 【何故SNS関連はすぐにOGPの設定が変更されないのか】 ... -
【Photoshop】自分でアクションを登録して効率よく作業！
何度も繰り返す単純作業はアクションを登録すれば、ワンクリックで実行できるので時短になります。 一回登録したらその後はいつでも使うことができるので、オススメの機能です！ 今回は単純な背景の切り抜きとトリミングをオートアクションに登録しました... -
【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... -
Photoshopのデータを一瞬で整頓する方法
【すべてのグループとレイヤースタイルを閉じる】 Ctrl+Alt+クリック グループの矢印▼を「Ctrl+Alt+クリック」で、すべてのグループとレイヤースタイルを一括で閉じられます。 不要なレイヤースタイルを簡単削除 下記参考サイトからスクリプトをDLしてきま... -
webデザイナーにおすすめ！Google Chrome拡張機能
以前にも同じテーマの記事がありますが、今回はさらにプラスして別のおすすめ拡張機能をご紹介します！ 便利でおすすめ！Google Chrome機能拡張 http://mtrad-blog.com/wp/2020/12/07/post-1575/ 【ColorZilla】 こちらはカラーピッカーで、webサイトから... -
【Photoshop】マッチフォント画像データからフォントを探す
Photoshopのマッチフォントは、画像やテキストデータのないものからフォントを探したいときに使う機能です 自分のPCに入っているフォントか、adobe fontからにたものを探してくれます 絶対に同じものはないかもしれませんが似たものは探せますので、時短に... -
ブラウザ判定が簡単にできる！【Modernizr】
【1.Modernizrとは】 【Modernizr】…JavaScriptライブラリ https://modernizr.com/ 例えばWEBサイト作成時、Webp未対応ブラウザではjpgを表示したい、というときがあります。 Modernizrを使えばWebpに対応しているブラウザで閲覧しているかを判定して、HTM... -
【XDをもっと効率よく使おう】便利なプラグイン3選&ショートカットキーカスタマイズ法
前回こちらの記事で便利なプラグインをいくつか紹介しました。 【作業効率UP!】便利なXDプラグイン5選 あれからまたワイヤーフレームを作成することが多くなり 色々と調べた結果便利なプラグインがまたいくつかありましたので、紹介したいと思います！ Spl... -
Photoshopのalt判定改善ツール【※非公式】
【alt判定がいまいちな現象】 業務で欠かせないPhotoshop。 altキーの反応がいまいちという事象があるようです。 以下のツイートの動画をご参考ください。 いつからphotoshop、こんなにショートカットキーの判定甘くなったんだろう、、3回に1回くらい取り... -
【3分でできる】コンタクトシートで写真選定を効率化
Web制作をしていると、「コンタクトシート」 という単語を聞いたことがある方も多いのではないでしょうか。 撮影した写真をデザインに入れ込んだりする際に役立つシートなので、 今日はそのコンタクトシートの作り方を紹介します！ コンタクトシートとは？... -
PhotoshopからCSSを生成するエクステンション「CSS3Ps」
Photoshopで作られたWEBデザインがそのままコードになってくれたらな、と思う事があります。 そんな願いを少し叶えてくれるのが「CSS3Ps」です。 【1.CSS3Psのダウンロード】 Photoshopのエクステンションに「CSS3Ps」を追加します。 まずはダウンロードし... -
【作業効率UP!】便利なXDプラグイン5選
デザインは基本PSDで作成していますが、お客様へデザインイメージを見せる際は PSDを画像で書き出したものと、XDでページ遷移も含めて作成したものとでは、お客様が受け取る印象は全然違いますね。 今後はXDもどんどん使いこなしていきたいと思う今日この... -
【ほぼwindows向け】便利なショートカット4選
最近知った、WEBデザインの仕事をしていると地味に便利なショートカット4選です。 ※主にWindowsユーザー向けの内容です。 【Windows10ユーザー向け】 [Win]+[Alt]+[PrintScreen] 選択しているウィンドウのみをキャプチャする キャプチャ保存先： C:\Users\... -
【Xd便利機能】ドキュメントアセットでデザインを管理する
今回は最近知ったXdの「ドキュメントアセット機能」について紹介したいと思います！ Xdを作業するときつい左側をずっとレイヤーパネルにしちゃってこの機能を全く使っていなかったのですが他の人が作ったXdデータを見させてもらった時にこの機能を使ってい... -
【scss】初心者向け！DreamWeaverでscssを触ろう！
最近やっとscssを触る機会がありDreamWeaverでやってみたら思っていたより便利で簡単に触ることができたので今回はそれを共有したいと思います！ 【用意するもの】 DreamWeaverでscssを使うために用意するものは２つです！ それはDre... -
【Photoshop】忘れてしまった便利な基本テクニック
長いことPhotoshopを使っていますが、最初に授業や教本で学んだ基礎的な部分をすっかり忘れているなあと最近多々思うようになりました。 そこで今回は、私が実際に忘れてしまっていた基本的なことを復習と備忘録のために紹介しようと思います。 【... -
【WEBデザイナー&ディレクター必見】Raindrop.ioでブックマーク管理のプロになる
みなさんは、デザインの参考サイトや、コーディングなどの技術の参考ブログなど、 どのように管理していますか? 私は、Google Chromeのブックマークに「採用サイト」「コーディング」などの切り口で フォルダ分けしていたのですが、少し時間がたつと、タイ...
1