Design

切り抜き画像は、背景に埋もれて見えることがありますよね。本記事では、Photoshopで切り抜いた画像に白縁をつける方法をわかりやすく解説します。 1.切り抜いた画像を用意する 2.対象のレイヤーを選択し、レイヤースタイルを開く 3.境界線を有効にする 「境界線」をチェックし、今回は以下のように設定します・サイズ：80px・位置　：外側・カラー：#fff 完成 設定を確定すると、切り抜き画像に白縁が付きます。

Web制作の現場では、デザインツールの操作だけでなく、リサーチや検証も欠かせません。本記事では、こうした業務を効率化するChromeの拡張機能を3つ紹介します。 1.WhatFont Webページ上に表示されているテキストのフォント情報を即座に取得できるChrome拡張です。 参考サイトを閲覧していると、「このフォント何だろう」と気になる瞬間がありますよね。ただ、詳細を調べようとすると、検証モードを開いて該当箇所を探す必要があり、少し面倒です。 WhatFontは、有効にした状態でページ上のテキストをクリックするだけで、現在適用されているフォント、フォントファミリー、フォントサイズ、フォントウェイト、行間、文字色を確認できます。 https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja 2.Responsive Viewer Webページを複数のデバイスサイズで同時に表示できる拡張機能です。 画面サイズを一つずつ切り替えながら確認していくと、各サイズの違いや変化が把握しづらいですよね。 Responsive Viewerは、有効にした状態でページを開くだけで、PC、タブレット、スマートフォンなど、自由に指定した複数のサイズを横並びで同時に表示できます。画面幅ごとのレイアウトの違いや、レスポンシブの切り替わり方を一覧で確認できる点が特徴です。 https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb 3.モバイル電話シミュレーター - レスポンシブサイトテスト スマホを操作している感覚で、Webページを閲覧できる拡張機能です。 PC上でスマートフォン表示を確認する場合、デベロッパーツールの切り替えだけでは、実際の閲覧時の印象がつかみにくいですよね。特に、画面サイズやスクロール時の見え方は、PC表示とは感覚が異なります。 モバイル電話シミュレーターは、有効にした状態でページを開くだけで、スマートフォンに近い表示環境を再現できます。画面サイズや縦横比を切り替えながら、スマホ表示時のレイアウトや情報量を確認できます。 前述の「Responsive Viewer」でも同様の確認は可能ですが、表示モードの切り替えが必要になるため、用途に応じて使い分けています。 https://chromewebstore.google.com/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk?hl=JA まとめ 普段の業務でよく使っている拡張機能の紹介でした。よかったら試してみてください。