Home-theater-designers
ウェブデザイナーとして、あなたが絶対にあなたのコンピュータに持っていなければならないソフトウェアは何ですか？チャンスはそれがPhotoshopとIllustratorです。これらは設計ワークフローの重要な要素ですが、必要だとは思わない小さなツールもあります。
最高のことは、それらをダウンロードする必要さえないということです---これらのChrome拡張機能をインストールするだけですぐに使用できます。ページ上のフォントの識別からウェブ要素間の距離の測定まで、これらのウェブデザインのChrome拡張機能はあなたの生活を楽にします。
1. Gmail用Dropbox
Dropboxはファイルホスティングサービスとしてスタートしましたが、すぐにその主要な対象者がデザイナーであることがわかりました。デザイナーはこのサービスを使用して同僚と仕事を共有しています。デザインファイルはメールの添付ファイルには大きすぎることが多いため、ファイルへのDropboxリンクを送信する方が簡単です。
Dropbox for Gmailを使用すると、プロセスがさらに便利になります。新しいメールウィンドウの下部にあるDropboxボタンを使用してファイルにリンクすると、受信者はあなたが送信しているものを覗き見します。画像ファイルへのリンクは画像をメールに直接アップロードし、他の種類のファイルへのリンクは便利なプレビューを生成します。
インストール： Gmail用Dropbox
2.FontFace忍者
何千ものフォントが利用可能であるため、タイポグラフィの可能性は無限大です。特に、どこかで見た美しいフォントを特定して、自分のプロジェクトに借りることができれば。
FontFace Ninjaは、まさにそれを行うのに役立つChrome拡張機能です。のように 画像からフォントを見つけるツール オンラインで表示されるフォントを識別するのに役立ちます。唯一の違いは、FontFace Ninjaが、見出しの書体や本文のように、ページのCSSにコード化されたフォントを読み取ることです。
FontFace Ninjaを起動すると、指示したフォントに関する情報が表示されます。書体だけでなく、太さ、サイズ、高さ、幅、色も表示されます。そのフォントをブックマークするには、姉妹サービスのアカウントが必要です。 FontFace道場 。
インストール： FontFace忍者
3.ColorPickスポイト
あなたが持っている色の目がどれほど優れていても、RGBまたはHTML値を知らない限り、オンラインで見た特定の色合いを再現することは困難です。幸い、ColorPickEyedropperがあるかどうかを推測する必要はありません。
お気に入り Mac用の最高のカラーピッカーアプリ 、ColorPick Eyedropperは、指定した色の値を表示します。違いは、ブラウザに常に存在し、何もアップロードする必要がないことです---アイコンをクリックして、ターゲットを適切な場所に移動するだけです。
拡張機能は、テキスト、画像、およびWebページに表示される可能性のあるほとんどすべてのもの（広告も含む）から色を読み取ります。色をキャプチャすると、その色のHTML、RGB、およびHSL値が表示されます。
インストール： ColorPickスポイト
4.寸法
このオープンソースの拡張機能は、特に中小企業向けに1回限りのギグを行う場合に、Webデザイナーに適しています。クライアントが以前のファイルやドキュメントなしでWebサイトを渡して、「このようなページをデザインするように依頼したが、テキストと画像が異なる」場合、レイアウトを理解するのは面倒です。
ノートパソコンのキーボードが機能しない
寸法を使用すると、ページ上の要素の高さと幅、および要素間のマージンを簡単に測定できます。これにより、既存のページを簡単に再作成し、制作開始後に独自のデザインを再確認できます。
インストール： 寸法
5.ビジュアルインスペクター
Visual Inspectorは、設計チーム向けの強力なフィードバックおよびコラボレーションツールであり、前の3つの拡張機能の機能を組み合わせ、さらに追加します。
の中に 検査する タブでは、ページ上の任意の要素を選択して、寸法からファイル名まで、その要素に関する完全な情報を取得できます。 NS 色 と タイポグラフィ サブタブを使用すると、カラーパレットとすべてのフォントを一目で確認できます。 資産 ページ上のすべての画像を1か所に集めます。
NS コラボレーション タブは、フィードバックを提供したり、チームと話し合ったりできる場所です。ページ上の任意の要素をクリックすることで、コメントを簡単に残すことができます。
Photoshopで既存のテキストを編集する方法
ほとんどの高度なツールと同様に、Visual Inspectorには値札が付いています。コメントを追加して変更を同期するには、ユーザーあたり月額9ドルから支払う必要があります。ただし、色、フォント、画像の検査などの基本機能は無料で使用できます。
インストール： ビジュアルインスペクター
6.簡単なスクリーンキャプチャ
Macでスクリーンショットを撮るのは簡単なので、画面キャプチャ拡張機能は冗長に見えるかもしれません。 Windowsで画面をキャプチャする もう少し面倒です。しかし、Easy ScreenCaptureにはかなりのセールスポイントがあります。
最も重要なことは、画面に表示されている領域だけでなく、Webページ全体をキャプチャできることです。長いページでいくつかの問題を報告する必要がある場合、これは貴重であり、それらすべてをキャプチャすると、3〜4枚のスクリーンショットが必要になります。
もう1つの巧妙なトリックは、スクリーンショットをクリップボードにコピーして、コンピューターに不要な画像ファイルを保存するのではなく、チャットや電子メールに直接貼り付けることができることです。
インストール： 簡単なスクリーンキャプチャ
7.氷2
最後に、毎朝対処しなければならない重要なタスクが1つあります。それは、睡眠の残りを振り払い、溝に入るということです。 InVisionのMuzli2は、アート、デザイン、UX、テクノロジーに関する厳選された記事を掲載した朝刊として機能します。
MuzliはデフォルトのChromeタブを置き換え、そこに表示されるものをカスタマイズできるようにします。興味に応じて、MuzliはDribble andBehanceから99designsやCreativeBloqまでのWebサイトでフィードを選択します。あなたが最初のコーヒーを飲みながらスクロールするためのたくさんのインスピレーション！
デザインコンテンツが満載のブラウザタブ全体が強すぎると思われる場合は、MuzliにもLiteバージョンがあります。デフォルトのタブが上書きされることはなく、拡張機能アイコンをクリックするだけでいつでもフィードにアクセスできます。
インストール： アイシー2
すべての設計タスクに対応するChrome拡張機能を入手する
このリストにあるChrome拡張機能は、デザインソフトウェアに匹敵するものではありませんが、タイポグラフィインテルであれ、同僚との共同作業であれ、デザイナーであることに伴うすべての小さなことをカバーしています。
Chromeウェブストアがツールで溢れていることに気づいたら、新しいツールの追加をやめるのは難しいかもしれません。だから学ぶ Chrome拡張機能を管理する方法 彼らが手に負えなくなる前に。
共有 共有 つぶやき Eメール Windows 11にアップグレードする価値はありますか？Windowsが再設計されました。しかし、それはWindows10からWindows11に移行するように説得するのに十分ですか？
次を読む 関連トピック- インターネット
- クリエイティブ
- グーグルクローム
- ウェブデザイン
- ブラウザ拡張機能
アリスは、アップルテックのソフトスポットを持つテクニカルライターです。彼女はしばらくの間MacとiPhoneについて書いていて、テクノロジーが創造性、文化、そして旅行を再形成する方法に魅了されています。
アリス・コトリアレンコのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください