便利!エディタの自動タグ挿入機能

posted in: デザイン | 0

今回は、エディタの便利機能についてお話ししようと思います。
htmlにボディコピーなど文書を書き込む際に、原稿などからコピペなどする場合があると思いますが、その改行する箇所一つ一つ”
“を入れていくのが結構大変だったりすると思います。
こんな感じですね。

<p>
行末に一つ一つ改行タグを入れていく
行末に一つ一つ改行タグを入れていく
行末に一つ一つ改行タグを入れていく
行末に一つ一つ改行タグを入れていく
行末に一つ一つ改行タグを入れていく
行末に一つ一つ改行タグを入れていく
行末に一つ一つ改行タグを入れていく
のは なかななか大変!
特に数が多ければ大変な
作業に。。。。
</p>

ところがこれを一発で解決できちゃう方法はあります!
今回はエディタを使用してご紹介しますね。
私は毎回Atomを使用しています。
他のエディタでも同様かとは思いますが、
無料でMacでもWindowsでも利用できますので、ご利用なさりたい方は下記からどうぞ。
https://atom.io/
まずこんな感じで基本情報を入力。

この、右下のやつをポチッとアクティブにする。

これで言語がエディタ表示用になり、現在表示で改行は「$」になります。
この「$」を改行である「<brp>」に書き換えていきますが、選択範囲以外の箇所も全てなってしまってはいけないので、今度はここの右側もアクティブにします。
これは選択範囲内のと言う意味です。

で、対象項目を選択し、そこをアクティブにしたまま一括置き換え〜。
右下のReplace Allをぽち。

やった〜!
一発でいい具合に改行入りました〜!!

如何でしたか?
私はこれで一気に仕事の作業効率が上がりました。
皆さんも機会がありましたらお試しください。

デザインの鍵!1分で解決カーニングを制する方法

posted in: 未分類 | 0

デザインされてる方なら、
皆さん気になるカーニングですね。
これがなかなか大変な方がいらっしゃるのではないでしょうか?
文言変える度にちまちま。
変えてまたちまちま。。
こんなんしてたら毎回大変だし。
これを一気に解決する方法お伝えしますね!
【Photoshop編】
まず適当に文字打って

文字ウィンドウのここを
明朝フォント→メトリクス
ゴシックフォント→オプティカル
をそれぞれ選択します。

今回は明朝フォントなのでメトリクスを選択。

基本ここをマイナスにして、ちょい詰め気味にするともっと綺麗です。

整いました!

ゴシックにしてオプティカルに変更。

【Illustrator編】
同じく文字ウィンドウの所のここを選びます。

自動
オプティカル
和文等幅
フォントに合わせてお選びください。
これで一回設定してしまえば、
どれだけ文言変更しても毎回カーニングが整っていることになります!
めちゃ楽です。
お試しください。

【簡単秒殺!】PhotoShopが重い時の対処方

posted in: デザイン | 0

PhotoShopの動作が重くて遅くてイライラ。。
そんな時はありませんか?
今回はそんなお悩みを一発で解決する方法をお伝えします。
 
PhotoShopではフォントで使用するメモリが結構あったりします。
それにプレビュー機能がついてますが、これが割とメモリ喰ってたりすることも多々あります。

この、右の文字参照のプレビューね。
 
ここの書式タブ→フォントプレビューのサイズ→なし
“なし”を選択。

 
再起動かけないと適用されないので、
いったん閉じてもう一回PhotoShopを開きます。

 
プレビューを確認しましょう。

OK!
プレビューが無くなりました。
 
RUCCAの場合はこれでいくらかメモリが解放され、
割とさくさく動くようになりました!
めっちゃ簡単なので、おすすめです。
 
 
しかしこれで、プレビューが無くなったことにより、
フォントの確認がしにくくなったかと思います。
 
しかしこのプレビューよりももっと良いフォントの確認方法がありますので、
前回のブログこちらをご参考ください。

↓↓↓↓
簡単にフォントを探せる方法

【簡単一発!】WEBサイトにおけるアクセントカラーの見つけ方

posted in: デザイン | 0

サイトにおける色選び、悩みますね。
適当に選んでしまうとサイト全体にまとまりがなくなったりしますよね。

そこで今回は、
色選びの方法をお伝えしようと思います。

まずはサイトで使用しているメインカラーの情報を用意します。
青系サイトなら青、
赤系サイトなら赤色です。

基本的に、アクセントカラーはメインカラーの保護色になります。
保護色とは、こちらの色相環の色の反対側の色のことです。

とはいえ全てサイトが原色を使用している訳ではありませんし、
その中でもトーンや、彩度など、色には複雑な要素も付きまといます。

そこで簡単に解決すべく、ご紹介するのはこちら
https://produce.rucca9.com/2020/10/07/color_tool/

こちらにアクセスして、

カラーピッカーからメインのカラーを選びます。


情報を入力したら

即カラー診断結果が。


色情報が出ました。
黄緑色#dfef6aの色がアクセントカラーです。

この状態でトーンは揃っていますので、
photoshopなどで編集する際は、トーンは変更しないようにしましょう。
トーンが変わると一気に
「保護色だけど、なんか違う。。」という状態になっちゃいます。

変えるとしたら、明るさのみOKです。
明るく/暗くで好きなように調整しましょう。

コツは少し他と比べてパキッとする程度です。
RUCCAはボタンなどでよく保護色を使用します。

いかがでしたでしょうか?
https://produce.rucca9.com/2020/10/07/color_tool/
を使って一発でアクセントカラーを選定することができました!

※rbg情報の取り方が難しい!
という方がいらしゃたら下のコメント欄にご意見いただければ
改めてご紹介致します。

宜しくお願い致します。