Illustratorのスポイトで半透明の色を拾いたいとき。(PhotoshopやFigmaと違う。) 2022.12.27 井川 宜久 スポイトで半透明の色を拾いたい。 Illustratorで作業中に、キーカラーを基に透明度を使ってデザインを組んでいくことがある。 そういったとき、不透明度が設定されていない場合はスポイトツールでサクッと色を拾える。が、不透明度が設定されているオブジェクトの場合はそうはいかない。 何年か前にできるようになった気がするが、忘れてしまったか、気のせいか、そもそもそんな方法は存... DTPmemosWebデザインデザインデザインツール
VirusTotal。Googleによる無料オンラインウイルス&マルウェアチェック。 2022.12.26 井川 宜久 無料オンラインウイルス&マルウェアチェック「VirusTotal」。 petsGoogle社が非商用で運用しているVirusTotal。 ネットで調べ物などをしているときに、意図しないページへ飛んでしまうことがある。 知らない相手から、メールで添付ファイルやURLのリンクが届くこともある。 また、無料のオンラインツールを使用するときもあるだろう。 そのようなとき、イン... ITmemosオンラインツール
画像編集フリー。Photoshopのような無料オンラインツール「Photopea」。 2022.12.22 井川 宜久 Photoshopなどでちょこっとだけ画像編集したくなったとき。 無料プランで使えるオンライン画像編集ツール「Photopea」。 ちょっとした画像編集作業をしたくなったとき、このパソコンにPhotoshopが入っていればなぁ、と思うことがある。 しかしPhotoshopはなかなか高価であり、単発や短時間の作業ではコスパが良くない。 そういうときに、ブラウザ上で無料... DTPmemosWebデザインオンラインツールデザイン
オンラインで動画を圧縮する、「オンラインでビデオを圧縮」。 2022.12.19 井川 宜久 オンラインでビデオを圧縮。Compress Video Online。 動画は1枚1枚の画像のコマ送り。そのためどうしても容量が重たくなる。かと言って圧縮のためだけに動画編集ソフトを立ち上げるのもこれもまた気が重たい。 そこで重宝するのが、オンライン圧縮サイト「Compress Video Online / オンラインでビデオを圧縮」。 インストールの必要も、アカウント登... ITmemosWebデザインオンラインツール
slickの使い方。jQueryスライダーのシンプルなサンプル例。コピペも可。 2022.12.17 井川 宜久 slickのシンプルなサンプル。 petsmetaタグ内に記述。 jQuery本体とslickのJS、slickのCSSを読み込む。 (※jQueryはbodyの閉じタグの前じゃなくても特に問題はない。開発者や公式サイトではmeta内となっている。) <script src="https://code.jquery.com/jquery-3.6.... CSSHTMLJavaScriptjQuerymemosWebデザイン
Material SymbolsをFigmaへ。インストールしてすぐに使える。 2022.12.16 井川 宜久 GooleのアイコンフォントをFigmaへ。Material Symbols。 Google Fontsから手軽に使えるアイコンフォント「Material Symbols」が、デザインツール「Figma」のプラグインとして配布されている。 Googleの案内では現時点、2,500以上のアイコンが使えるらしい。 かつ「Outlined(輪郭)」、「Rounded(角丸)」、「S... FigmamemosWebデザインオンラインツール
Figmaのルーラー(定規)の出し方。表示方法がイラレとちょっと違う! 2022.12.15 井川 宜久 Figmaのルーラー(定規)は「shift + R」で。 Figmaでデザインをしているときにルーラー(定規)を出そうと「command + R」 or 「Ctrl + R」を押しても出てこない。 あれ!?と思い、じゃあ、と右クリックで出そうとしてもメニューにもない。 IllustratorやPhotoshopで慣れているとつい、「command + R」 or 「Ctr... FigmamemosWebデザインデザイン
写真の一部を消せるオンラインツール「Cleanup Pictures」。 2022.12.14 井川 宜久 映り込んだ被写体や不要な箇所を消したい。 petsPhotoshopのように。 写真の一部や映り込んだ被写体を消したいときに、なぞって消すことができるオンラインツールがある。 まるで、Photoshopの「修復ブラシ」や「コンテンツに応じた〜」のように。 petsCleanup Pictures。 真ん中の点線で囲まれた範囲内で、クリーンアップしたい画... memosMovieWebデザインオンラインツール
detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。 2022.12.10 井川 宜久 detailsタグとsummaryタグ。HTMLだけでアコーディオンメニュー。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉(アコーディオンメニュー)ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い回しも可能。 de... CSSHTMLJavaScriptjQuerymemosWebデザイン
Material Symbols and Iconsの使い方。表示されないときの対処法。 2022.12.09 井川 宜久 Googleのアイコンフォント。 アイコンフォントといえば「Font Awesome」が有名だが、Google Fontsでもアイコンフォントを無料配布している。 Googleフォントのように使え、SVGやPNG形式で画像として個別にダウンロードすることもできる。 また、デザインツール「Figma」のプラグインとしても利用できる。 Google Fontsのサイトによる... CSSHTMLmemosWebデザインオンラインツール
Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。 2022.12.07 井川 宜久 Figmaのペンツールとマスクで、背景から切り抜く。 Illustratorや画像編集ソフトの代表格であるPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。 AIの導入などによりPhotoshopの被写体の切り抜き精度が上がっている。ただしうまく切り抜けない時は、今でも結局人の手によるペンツールに頼ることになる。 また、ペンツールはロゴやアイ... DTPFigmamemosWebデザインデザイン
Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。 2022.12.06 井川 宜久 Figmaで名刺を作成、印刷してみたところ。 デザインツール「Figma」で、紙媒体の名刺を作って実際に発注し、仕上がりを確認してみた。 Figmaは元々デジタルデバイス向けなので、単位がpxオンリー、カラーモードはRGB、印刷物向けのデータ形式はPDFのみ、などと制限がある。が、工夫すれば問題なく入稿でき、実際の紙に印刷された名刺は特に問題なかった。 た... DTPFigmamemosデザイン
Figmaを日本語化。言語切り替えの使い方。再起動も不要。 2022.12.03 井川 宜久 Figmaを日本語に切り替える方法。MacもWinも使い方は同じ。 2022年のFigmaの日本法人設立により、Figmaはデフォルトで英語⇄日本語の言語切り替えが可能となっている。 特に再起動の必要もなく、早ければ数秒〜数十秒ほどで言語の切り替えができる。 インストール版でもブラウザ版でも手順は同じ。 Figmaの画面右下のhelpマーク(... FigmamemosWebデザインデザイン
Figmaで検索・置換する方法。ショートカットからでOK。 2022.12.02 井川 宜久 Figmaで検索・置換が可能に。 Figmaのアップデートで検索と置換の機能が実装されていた。 ショートカットで検索、置換ができるので、なかなか使い勝手が良い。 使い方は簡単で、以下のショートカットですぐに覚えられる。 ショートカット Mac:「Command」 + 「F」 Win:「Ctrl」 + 「F」 ※「F」は「Find... FigmamemosWebデザインデザイン
Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。 2022.12.01 井川 宜久 Figmaのモザイクプラグイン「Pixels」とは? ネット上に写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、プラグインを探してみたところ、「Pixels」というシンプルで素敵なプラグインが見つかった。 Pixelsは、ただモザイクをかけられるだけでなく、ベクター画像としてモザイク処理... FigmamemosWebデザインデザイン
CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを! 2022.11.30 井川 宜久 CSSブレンドモード。 PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。 「描画モード」は英語では「Blend Mode(ブレンドモード)」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。 そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。 m... CSSmemosWebデザイン
Figmaの印刷データ用プラグイン「Print for Figma」の使い方。 2022.11.29 井川 宜久 Print for Figma。Figmaの印刷用プラグインとは? Figmaはもともとデジタルデバイス向けのツールだが、工夫すればDTPやグラフィックデザインも可能だ。IllustratorやPhotoshopでの知識や経験があればやってやれないことはない。 逆に、Figmaは元々Photoshopを意識して作られたデザインツールなので、カラーパレットやレイヤーなどの機能やイ... DTPFigmamemosデザインデザインツール
Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。 2022.11.28 井川 宜久 グラフィック(印刷の通販グラフィック)の名刺発注の手順。 近年ユーザーが増えているFigma。基本的にWeb向けのツールだが、名刺くらいは作れそうなので、実験的に自分の名刺で実際に作ってみた。 印刷は長年定期的に利用しているグラフィックさんに発注。 参考:Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。 参考:Figmaで名... DTPFigmamemosデザイン
Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。 2022.11.25 井川 宜久 Figmaで印刷物を。名刺を作ってみる。 petsデジタルデバイス向けのデザインツール「Figma」で、紙媒体の名刺を作れるらしい。 Figmaで名刺制作。 ひとまずテストとして自分用の名刺制作を試みる。印刷物でよく使用するテキストのカーニングやアウトライン化も可能で、PDFでの書き出しもできる。 ある程度IllustratorやPhotos... DTPFigmamemosデザイン
counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。 2022.11.22 井川 宜久 CSSだけで連番を振ってくれる、counter-increment。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 番号を振ってくれる「counter-increment」プロパティに、「custom-ident(名前)」と「integer... CSSHTMLmemosWebデザイン