2019-11-05

Illustratorでロゴを作る

Illustrator

Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらをうまく利用することで、簡単で見栄えの良いロゴを作ることができます。

オブジェクトを変形させる

ステップ１

まずテキストを入力します。ブラシをイメージしたロゴにするため「丸ゴシック系」のフォントを利用し、大き目のサイズに設定します。フォントの指定やサイズの設定は、コントロールパネルから行なうと便利です。

ステップ２

テキストを入力後、書式メニューから「アウトラインを作成」を実行し、テキストオブジェクトからパスオブジェクトへ変換します。アウトラインを作成した直後はオブジェクトがグループにまとまった状態になっているので、「オブジェクト＞グループ解除」を実行して、それぞれのオブジェクトが個別に選択できるようにしておきます。

f:id:yachin29:20150509003756j:plain

ステップ３

バウンディングボックスを表示させ、バウンディングボックスの四隅にあるポインタにマウスカーソルを近づけるとカーソルの形状が変わり、オブジェクトの変形が可能であることを示します。このバウンディングボックスを利用して、それぞれのオブジェクトを変形させ、全体のバランスを整えます。

f:id:yachin29:20150509003846j:plain

オブジェクトにアートブラシを設定する

ステップ１

まずは、オブジェクトに設定するアートブラシを用意します。ウィンドウメニューから「ブラシライブラリ＞アート＞ペイントブラシ」を実行すると、さまざまな種類のアートブラシが用意されています。

f:id:yachin29:20150509003923j:plain

ステップ２

つぎにオブジェクトの「塗り」と「線」に対してカラーの設定を行ないます。オブジェクトを選択した状態でアピアランスパレットを開くと、「塗り」と「線」のふたつの項目が存在しています。ここで「塗り」の項目を選択し、カラーパレットで「C100%／M20%」のカラーを設定します。

f:id:yachin29:20150509004016j:plain

ステップ３

続いて、「線」の項目を選択した状態で、コントロールパネルから「ドライブラシ９」を選びます。すると線にアートブラシが適用されるので、線幅を「0.85pt」に設定し、カラーを「C100%／M30%」設定して一つ目の線の設定は完了です。

アピアランスの項目を追加し、ブラシを重ねる

ステップ１

まず、「新規線の追加」ボタンをクリックし、線の項目の上に追加します。新しく作られた線の項目を選択した状態でコントロールパネルから「ブラシ（ドライブラシ９）」を選択します。続いて「カラー（C80%）」と「線幅（0.5pt）」を設定します。

ステップ２

同様の手順で、線２から線４までを作成します。ひとつのオブジェクトに４つの線が重なっていることになります。ここまでの作業で、ひとまず水彩画風ロゴの設定が完了しました。

f:id:yachin29:20150509004114j:plain

f:id:yachin29:20150509004145j:plain

他のオブジェクトへグラフィックスタイルを適用する

ステップ１

グラフィックスタイルパレットを開き、アピアランスが設定されているオブジェクトを選択した状態で、「新規グラフィックスタイル」アイコンをクリックします。グラフィックスタイルパレットにアイコンが追加されました。これで登録は完了です。他のオブジェクトをすべて選択し、さきほど登録したグラフィックスタイルのアイコンをクリックします。すると、すべてのオブジェクトに対して同じアピアランスの内容が設定されます。

f:id:yachin29:20150509004230j:plain

ステップ２

ペンツールを使い、短めのパスを描きます。「塗り」を透明に設定し、「線」に「C100%／M20%」のカラーを設定しておきます。ブラシライブラリの中から「アート＞アート＿インク」を開きます。さきほど描いたパスを選択し、散布ブラシの中から「飛沫」を選択します。すると、インクがハネたようなパスを描くことができます。

カラーバリエーションを作成する

ステップ１

色を変更したいオブジェクトを選択し、コントロールパネルから「オブジェクトを再配色」アイコンをクリックします。するとダイアログが表示されるので、その中から「編集」ボタンをクリックします。

f:id:yachin29:20150509004322j:plain

ステップ２

ハーモニーカラーを維持するためのリンクをチェックし、カラーホイールの中にあるスライダーをドラッグします。すると、オブジェクトに設定されたカラーの深度を維持した状態でカラーを変化させることができます。それぞれのオブジェクトのカラーを変更し、今回のブラシ風ロゴの完成です。

f:id:yachin29:20150509004359j:plain

f:id:yachin29:20150509004449j:plain

helpx.adobe.com

2019-11-05

1つのプラグインでフェードとカルーセルの動きを実装する

jQuery Webサイト制作

使用するプラグインは

kenwheeler.github.io

今回はページ上部に「fade」
ページ中央部にカルーセル（pc時は3枚表示、sp時は1枚表示）を実装

<script>
$(document).on('ready', function() {
//フェード
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});

//カルーセル
$(".pick-up").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 768,
settings: {
centerMode: true,
slidesToShow: 1
}
}
]
});
});
</script>

2019-10-30

Illustratorチュートリアルまとめ

Illustrator

cssのみで作るドロップダウンメニュー

Webサイト制作

コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。
メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテンツにダイレクトに飛べるので、ユーザーの手間が省けるわけです。ユーザビリティの向上のためにも情報量の多いサイトであれば積極的に使っていきましょう。

メガドロップダウンメニューを採用しているサイト例
www.tiffany.co.jp

www.nike.com

www.kureha.co.jp

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドロップダウンメニューの作成</title>
<style>
html,body,ul,li{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}

.g-nav{
width:600px;
margin:100px auto 0;
}
.g-nav>ul{
display:flex;
position:relative;
}
.g-nav>ul>li{
width:200px;
height:50px;
background:#ED6062;
text-align:center;
line-height:50px;
border-right:1px solid #FFF;
cursor:pointer;
}
.g-nav>ul>li:last-child{
border-right:0;
}
.g-nav>ul>li>a{
display:block;
line-height:50px;
color:#222;
}
.g-nav>ul>li>a:hover{
background:#83AFEB;
}
.drop-menu {
width:100%;
height:400px;
background:#CCC4C4;
position:absolute;
top:50px;
visibility:hidden;
opacity:0;
}
.g-nav>ul>li:nth-child(1):hover>.drop-menu {
visibility:visible;
opacity:1;
transition:0.6s;
}
.drop-menu>li>a{
display:block;
text-align:left;
line-height:50px;
color:#222;
padding-left:50px;
}
.drop-menu>li>a:hover{
background:#B1EBAA;
}
</style>
</head>

<body>
<nav class="g-nav">
<ul>
<li>ボタン１
<ul class="drop-menu">
<li><a href="#">ボタン1-1</a></li>
<li><a href="#">ボタン1-2</a></li>
<li><a href="#">ボタン1-3</a></li>
</ul>
</li>

<li><a href="#">ボタン２</a></li>
<li><a href="#">ボタン３</a></li>
</ul>
</nav>
</body>
</html>

2019-10-23

jQueryを記述する上で気をつけるポイント

jQuery

jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。
jQueryを適切に記述する事である程度の改善は出来るので、しっかりと覚えましょう。

セレクターの指定はID

やむを得ずクラス名で指定しなければいけない場合以外は必ず「ID名」を指定しましょう。

同じIDでの指定でも
OK

$("#target").css({'color':'red'});

$("div#target").css({'color':'red'});

同じセレクタは変数化する

var target = $('.target p');
target.css({'background-color':'red'});
target.show();

$('.target p').css({'background-color':'red'});
$('.target p').show();

連続した処理はメソッドチェーンを使う

$('#target p').css({'background-color':'red'}).show();

jQueryはホスティングされているものを使う

ファイルデータの大きいjQuery本体をCDNにする事で実際には色々なメリットがあります。

メリット

高速化
他サイトでのキャッシュが期待できる（※）
自サーバーにJQueryを置く必要がない

などですが、
一方、万が一CDNがダウンしてしまった場合などには使えなくなってしまいます。このようなトラブルが起こったときに代替策として、フォールバックという方法があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- CDNが使えない場合は自サーバーに置いたjQueryファイルを読み込む -->
<script>
window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\/script>');
</script>

2019-10-23

スクロールアニメーションが簡単に実装できる「Animate on scroll library」

Webサイト制作

スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えます。

michalsnik.github.io

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>AOSを実装してみる</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/aos.css" media="(min-width:768px)">
</head>
<body>
<div class="container">
<header>
<h1>Animate On Scroll Library</h1>
</header>
<div class="main">
<div class="box">
<h2>ニューヨーク・タイムズスクエア</h2>
<div class="box-inner" data-aos="fade-up" data-aos-delay="300">
<p class="photo"><img src="img/01.png" alt=""></p>
<p class="txt">テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</p>
</div><!--/.box-inner-->
</div><!--/.box-->
<div class="box">
<h2>京都・清水寺</h2>
<div class="box-inner" data-aos="flip-left">
<p class="photo"><img src="img/02.png" alt=""></p>
<p class="txt">テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</p>
</div><!--/.box-inner-->
</div><!--/.box-->
<div class="box">
<h2>パリ・シャンゼリゼ通り</h2>
<div class="box-inner"  data-aos="zoom-in-down">
<p class="photo"><img src="img/03.png" alt=""></p>
<p class="txt">テキストテキストテキスト<br>テキストテキストテキスト<br>テキストテキストテキスト</p>
</div><!--/.box-inner-->
</div><!--/.box-->
</div><!--/.main-->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/aos.js"></script>
<script>
     AOS.init({
        easing: 'ease-in-out-sine'
      });
</script>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,p,ul,li{
margin:0;
padding:0;
box-sizing:border-box;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
img{
vertical-align:bottom;
}
header {
width:25%;
height:100vh;
background:#0E63A0;
position:fixed;
z-index:1000;
}
header::after {
display:block;
content:"";
width:100px;
height:100vh;
background:url(../img/bg.svg) no-repeat center center/cover;
position:absolute;
top:0;
right:-97px;
}
h1 {
color:#FFFFFF;
padding:100px 10px 0;
}
.main {
width:75%;
margin-left:25%;
}
.box {
height:100vh;
padding:0 150px;
}
.box:nth-of-type(2){
background:#C0C0C0;
position:relative;
}
.box:nth-of-type(2)::before {
display:block;
content:"";
width:100%;
height:100px;
background:url(../img/bg2.svg) no-repeat center center/cover;
position:absolute;
top:-98px;
left:0;
}
.box:nth-of-type(2)::after {
display:block;
content:"";
width:100%;
height:100px;
background:url(../img/bg2.svg) no-repeat center center/cover;
position:absolute;
bottom:-98px;
left:0;
transform:rotate(180deg);
}
h2 {
text-align:center;
padding:80px 0 50px;
}
.box-inner{
display:flex;
justify-content:space-between;
}
.box:nth-of-type(2)>.box-inner{
flex-direction:row-reverse;
}
.box-inner img {
max-width:100%;
}
@media (max-width:767px){
header {
width:100%;
height:auto;
position:static;
}
h1 {
padding:20px 10px;
font-size:20px;
text-align:center;
}
.main {
width:100%;
margin-left:0;
}
.box {
height:auto;
padding:50px 10px 0;
}
h2 {
text-align:center;
font-size:18px;
padding:20px 0 10px;
}
.box-inner{
display:block;
}
.photo{
margin-bottom:20px;
}
.txt{
text-align:center;
margin-bottom:40px;
}
}