こんにちは。
今日は前回PhotoShopのフォントプレビューを非表示にしたことで、
どうやってフォントを探せばいいかという問題を解決していきたいと思います。
前回ご覧になっていない人でも、
Adobeを利用するより便利で何よりマシンに負担がかかりませんので、
オススメの方法です。
今回オススメするのは
https://wordmark.it/
です。
まずは上記のサイトにアクセス。
検索したい文字を入れます。
こんな感じでづらづらと出てきます。
ここの左を選んでくださいね。
こっちがあなたの手持ちフォントからの表示をしてくれます。
づらづらと、スクロールダウンしていきましょう。
これだ！と思うフォントを見つけたら。
その直下のフォント名をコピーです。
私はそれをそのままPhotoShopのフォントの所に貼り付けますが、
たまにヒットしない時がありますので、
その際は手動でスクロールして設定します。
出来上がりです！
【1番簡単!】パーティクルを使ったWEBデザイン
パーティクルデザイン
こんな感じの雪のような
パーティクルが飛び交っているデザインです。
まず、こちらよりデータをダウンロードしていただき、
jsファイルを手に入れます。↓↓↓
https://vincentgarreau.com/particles.js/
その中にある
stats.js
particles.js
app.js
を取り出し、任意の位置に置きます。
以下を<head></head>内に書きます。
<!– stats.js –>
<script src=”（ここにパスを入れます）/stats.js”></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = ‘absolute’;
stats.domElement.style.left = ‘0px’;
stats.domElement.style.top = ‘0px’;
document.body.appendChild(stats.domElement);
count_particles = document.querySelector(‘.js-count-particles’);
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>
<script src=”（ここにパスを入れます）/stats.js”></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = ‘absolute’;
stats.domElement.style.left = ‘0px’;
stats.domElement.style.top = ‘0px’;
document.body.appendChild(stats.domElement);
count_particles = document.querySelector(‘.js-count-particles’);
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>
続いて以下を<body></body>内に書きます。
<script src=”（ここにパスを入れます）/particles.js”></script>
<script src=”（ここにパスを入れます）/app.js”></script>
<script src=”（ここにパスを入れます）/app.js”></script>
続いて適用させたい要素を選んで、そこに
id=”particles-js”
を書き込みます。
だいたい<container>だったり<body>だったりが多いと思います。
ここで保存したら、
通常は反映されるのですが、
万が一反映されない場合は
生成される<canvas>
がうまく調整されていない場合がありますので、
そんな時の為に
canvas {
display:block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
こちらをcssに追加します。
これで実装完了です！
※補足です。
確実に再現していただく為に、
“は必ず半角の”にしていただくようにお願いします。
ブログ形式だとどうしても違う”に
変換されてしまうようですので、
必ずエディタ上でshift+”でお願いします。
変換されてしまうようですので、
必ずエディタ上でshift+”でお願いします。
「押したくなる。」クリックされやすいボタンのデザイン
今日はどうやったら
ユーザーの反応の良いボタンをデザインできるかについて
お伝えしますね。
ポイントとしては、
・ぷっくり
・押したくなるアクション
この２つです。
具体的にやっていきますね。
photoshopです。
まずベースのシェイプを作ります。
ぷっくりですので、丸めでいきます。
レイヤー効果でグラデーションカラーを付けます。
色は、サイトカラーのメインカラーから保護色を選んでくださいね！
今回はブルーでいきます。
この場合は上から明るい→暗いの順です。
境界線を作り、一段暗いカラーで締めます。
丸を左側に配置します。
グラデはベースと正反対で上から暗い→明るいの順です。
早くも立体感が出てきました！
上に三角を置きます。
この時外光彩にうっすら乗算グレーカラーをお忘れなく。
細かい所ですが立体感に影響します。
ボタンの文言設定。
任意でお好きなものをどうぞ。ドロップシャドウをお忘れなく。
内容はサイトの趣旨に合わせてくださいね。
あ、右側がスペース空き過ぎました。
短く修正しました。
ベースにもうっすらドロップシャドウを入れ、立体感MAX！
はい。
ここからは設定のお話です。
ポイントその２の
・押したくなるアクション
ですね。
サイトへの設定は
htmlソースで
<a class=”btn” href=”飛ばしたいリンク”> <img src=”ボタンのパス” /> </a>
CSSは
.btn:hover img {
opacity:0.5;
}
これでOK！
サンプルです。
こんな感じ。↓↓↓
デザイン作り方 トップ画像編5
バナー作っていきます。
まずは必要な内容を入れていきます。
背景を付け、
情報を整理しそれぞれの場所に置いていきます。
画像素材を置きましょう。
今回は可愛い目のものでデザインしていきます。
可愛い目に寄せてきます。
お分かりでしょうか？
少々フォントを変更しました。
フォント名は
FOT-ロダンローズ Proです。
だいたい乗せ終わりましたが、
なんだか上のガーランドとかが縦横変だったり、余白が均等じゃなかったりもう一息な印象です。
最終調整。
ぱしっとしましたね！
出来上がり。