読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【コンペ】和風調味料のバナー 1day1banner (1日1つバナー制作25日目)

1日1つバナーを作っていきます。

和風調味料のバナー

f:id:p_and_a_fam:20170410112233j:plain
サイズ
300*250(600*500) 728*90
Time
60min 15min
Tool
photoshop

【design】配色について【随時更新】

  1. 「色」の基礎知識
    1. 大まかな分別
    2. 3つの要素
  2. webdesignでの配色
    1. 目的で考える
    2. 色相から考える

1.「色」の基礎知識

大まかな分別

物体色
光の反射によって受け取る色。
光源色
光を放つ光源自体から受け取る色。

3つの要素

Hue(色相)
色の相違(赤、青、黄など)
Saturation(彩度)
色の鮮やかさ
Brightness(明度)
色の明るさ、明暗。

2.webdesignでの配色

目的で考える

ベースカラー(全体の70%)
一番大きい面積を占める色。目立つというよりは背景的に使用するため、他の色やコンテンツを引き立てるものを選ぶ。
メインカラー(全体の25%)
そのサイトのメインとなる色。個人的にはロゴの配色から選ばれている事が多い印象です。この色でサイトの印象を決めます。
アクセントカラー(全体の5%)
サイトを引き締める役割を持つ色。他の2色に合いつつも、目立つものを選択する。ボタンだったり注目してほしい要素に使用。個人的にはロゴの色がアクセントカラーに使用されている場合も多い気がします。

色相から考える

Monochrome モノクロ
同じHue(色相)内でSaturation(彩度)とBrightness(明度)を変えて行く。シンプルな印象や高級感のある配色になる。
Triad トライアド
色相を三分割(90度ずつ割る)して3つの色を使う。それぞれが一番遠い距離にある色な為、違いがハッキリする。バラエティに富んだ印象に?彩度低めに使っても地味すぎない配色になる。
Complementary color 補色
色相で向かい合う2色の色を使う。違いがかなりハッキリする為、両方の色が目立つ。派手な印象に。

参考
覚えるのは色相・彩度・明度の三属性だけ! 初心者のための色彩講座 | いちあっぷ
絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎 | 秋田県webデザイナー【weblog】|秋田HP制作・webサイト制作
Adobe Color CC
WEBデザインで押さえるべき配色(ベース、メイン、アクセント)の基本「3つのカラー」|TECHNICAL BLOG|株式会社エムハンド

【模写・アレンジ】保湿化粧品のバナー 1day1banner (1日1つバナー制作24日目)

1日1つバナーを作っていきます。

専門学校バナー模写

模写元

f:id:p_and_a_fam:20170410112233j:plain

模写

f:id:p_and_a_fam:20170410112233j:plain
サイズ
300*250(600*500)
Time
30min
Tool
photoshop

Memo

高級感を意識して配色などを決めなおしました。

クリックボタンは元のデザインの方が目立ちやすかったかもしれません。

【javascript】タイマー処理を使った画像のフェイドイン・アウト


slide

html

<p><img src="img/img1.jpg" alt="photo" id="img"></p>
<ul>
<li id="f_out">
フェードアウト
</li>
<li id="org">
元の画像
</li>
<li id="f_in">
フェードイン
</li>
</ul>
</html>

javascript

var f_out = document.getElementById('f_out');
var f_in = document.getElementById('f_in');
var img = document.getElementById('img');
var org = document.getElementById('org');
var opacity = 1;
var timer_id = null;
var timer_id2 = null;

function click_f_out(){
    if (opacity > 0){
    opacity -= 0.1
    img.style.opacity = opacity;
    timer_id = setTimeout(click_f_out,50);
    }else{
    clearTimeout(timer_id);
    timer_id = null;
    }
}

function click_f_in(){
    if (opacity < 1){
    opacity += 0.1;
    img.style.opacity = opacity;
    timer_id2 = setTimeout(click_f_in,50);
    }else{
    clearTimeout(timer_id2);
    timer_id2 = null;
    }
}

function click_org(){
    clearTimeout(timer_id);
    opacity = 1;
    img.style.opacity = opacity;
    timer_id = null;
}

function timer_set(){
    if(timer_id === null){
    click_f_out();
    }
}

function timer_set2(){
    if(timer_id2 === null){
    click_f_in();
    }
}

f_out.addEventListener('click',timer_set,false)
f_in.addEventListener('click',timer_set2,false)
org.addEventListener('click',click_org,false)

タイマー処理が2つ書かれていた場合

一つ目のタイマー処理は一回実行され、次のタイマー処理で読み込み(?)が繰り返される。

var i = 0;
var f = null;
function count(){
console.log('b');
f = setTimeout(count,500);
}
function count(){
console.log(i++);
f = setTimeout(count,500);
}

【javascript】タイマー処理をつかったスライドショー


slide

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
<img id="gazou" src="img/img1.jpg" alt="potato">
</p>
<button id="play">play</button>
<button id="stop">stop</button>
<script type="text/javascript" src="script/slide1.js"></script>
</body>
</html>

javascript

var play_button = document.getElementById('play');
var stop_button = document.getElementById('stop');
var gazou = document.getElementById('gazou');
var img = ['img1','img2','img3'];
var num = 1;
var time_id = null;
var i = 0;

play_button.addEventListener("click", timer_set, false);
stop_button.addEventListener("click", stop, false);

function play(){
    gazou.src = 'img/' + img[num] + '.jpg';
    num++;
    num %= img.length;
    time_id = setTimeout(play,1000);
    i ++;
}
function stop(){
    clearTimeout(time_id);
    time_id = null;
}

function timer_set(){
    if(time_id === null){
    play();
    }
}

【javascript】タイマー処理【随時更新】

タイマー処理

setInterval
一定時間ごとにある処理を繰り返す。

前の処理が終わったかどうかを"判断せず"に繰り返す。

setInterval(function, 時間指定,functionの引数1, functionの引数2,…)

例 指定した関数を指定時間ごとに繰り返す。

var i = 0;
function count(){
console.log(i++);
}
setInterval(count,1000);
clearInterval
setIntervalで設定された繰り返しをキャンセルでする

setIntervalの処理を変数の代入して、clearIntervalをかける

var i = 0;
function count(){
console.log(i++);
if(i > 3){
clearInterval(set);
}
}
var set = setInterval(count,1000);

無名関数を使う書き方

var i = 0;
function count(){
console.log(i++);
}
var set = setInterval(function(){
count();
if(i > 3){
clearInterval(set);
}
},1000);
setTimeout
一定時間後にある処理を一回だけ実行。

前の処理が終わったかどうかを"判断して"繰り返す。

setTimeout(function,時間,引数1,引数2)

0.5秒後にcountを一回行い終了する。

var i = 0;
function count(){
console.log(i++);
}
setTimeout(function(){
count();
},500);

setTimeoutをループさせる。
関数の中で同じ関数を呼び出す事でループできる。
最初の一回だけ呼び出す必要がある。

var i = 0;
function count(){
console.log(i++);
setTimeout(function(){
count();
},500);
}
count();
clearTimeout
setTimeoutの処理を止める。

この場合setTimeoutの後ろに記述しないと、clearTimeoutが効いたあとでまたsetTimeoutが呼び出されるので無意味。

var i = 0;
function count(){
console.log(i++);
var set = setTimeout(function(){
count();
},500);
if(i > 5){
clearTimeout(set);
}
}
count();

【模写・アレンジ】専門学校バナー模写 1day1banner (1日1つバナー制作23日目)

1日1つバナーを作っていきます。

専門学校バナー模写

模写元

f:id:p_and_a_fam:20170410112233j:plain

模写

f:id:p_and_a_fam:20170410112233j:plain
サイズ
300*250(600*500)
Time
30min
Tool
photoshop

Memo

背景レイアウトはもっと目線を意識する。「今すぐ診断」の文字装飾は目立ちやすさとかクリックされやすさをもっと考える。。