くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[インターン]POP制作

インターンでの制作事例 第2段です。

イベントでの試食販売商品のPOP制作をしました。

 

前回のショップカードと同じ店舗のもので、ショップカラーの青を使用し、高級感を出すのが前提条件です。

 

採用していただいたものはこれ↓ ↓

f:id:pleasure10501:20150825233635j:plain

 

使用ソフト:Adobe Illustrator
サイズ:B5

 

セリフを喋っているトマトのキャラは「ポミトくん」といい、このトマトソースのメーカーのオリジナルキャラです。

f:id:pleasure10501:20150825234724p:plain

Pomiのサイトから転載


このキャラを入れてほしいとの要望が加わったので、上左のイラストと別のイラストをトレースして組み合わせて、「ニッコリ笑いながらサムズアップしているポミトくん」が出来上がりました。
手間はかかりましたが、我ながらよくできた方です。

トマトの ポミト君が喋るのでセリフの色もトマト色です。

高級感を損なわないように、色は多くしませんでした。

 

ちなみに、他のデザイン案はこちら

f:id:pleasure10501:20150825233627p:plain f:id:pleasure10501:20150825233632j:plain

 

このECサイトは高級感をとても重視するので、高級感と訴求力が両立するデザインが求められます。
ここにいつも頭をかなり絞っています。

 

[インターン]ショップカード制作

ご無沙汰しております。

この2ヶ月弱で、ポートフォリオサイト制作や、
インターンに行き始めたりと色々ありました。

 

インターンの内容はWeb制作メインではないのですが、バナーやポスターを作ったりもして、イラストレーターとPhotoshopをフル活用しています。

訓練校での授業が確実に活かされています!

 

下は、制作させて頂いたショップカードです。
実はデザインには自信がなくて、この制作をやるように言われた時には固まりました・・・。

ですが、必死の思いでやりました。

ショップロゴはもともと決まっていたものです。
イラストレーター使用です。

 

<目的>
  • 基本的にはECサイトのショップだが、時々イベントを行う時に来場者に渡すためのショップカード。
  • ECサイトへの誘導が目的。

<制作ポイント>
  • ショップカラーのブルーを使う(アドリアンブルーという色で決まっている)
  • ECサイトのみのため、地図は不要。QRコードを目立たせる。
  • 検索ワード
  • 無駄な情報を極力省く。
  • URLも本来はhttp://〜だが、ブラウザ入力では入れなくても大丈夫なので省いた。最後のjp/の/も同様。

デザイン案は10パターン作って、こちらを正式に採用して頂くことになりました。

 

f:id:pleasure10501:20150821233145p:plain

 

 

デザインに自信がない分、採用して頂いた時には感無量でした。

 

[HTML5]ルビ付き・縦書きテキスト

HTMLでルビをつける

<ruby>香水<rt>こうすい</rt></ruby>

縦書きにする
webkit系とIEのみ Safariは非対応

  -webkit-writing-mode: vertical-rl;

vertical-rl は右から左への順番
vertical-lr は左から右

テキスト

<p><ruby>君<rt>きみ</rt></ruby>が<ruby>行<rt>ゆ</rt></ruby>く<br>
<ruby>道<rt>みち</rt></ruby>の<ruby>長手<rt>ながて</rt></ruby>を<br>
<ruby>繰<rt>く</rt></ruby>り<ruby>畳<rt>たた</rt></ruby>ね<br>
<ruby>焼<rt>や</rt></ruby>き滅ぼさむ<br>
<ruby>天<rt>あま</rt></ruby>の火もがな</p>


f:id:pleasure10501:20150731141037p:plain

[Photoshop]備忘録・ペンツールの描画に色をつけるには

Photoshopの操作についての備忘録。

 

ペンツールの描画に色をつけるには

アウトラインに色を塗る等するには、一手間必要。

 

①ペンツールでアウトラインを書き、閉じておく

 → パスの状態になる

f:id:pleasure10501:20150718204811p:plain

 

②パスの状態では何もできないため、選択範囲にすることが必要。

「ウィンドウ」メニューの「パス」を表示する

f:id:pleasure10501:20150718204809p:plain

 

③サムネイル画像をCtrl+クリックすると自動的に選択範囲になる

f:id:pleasure10501:20150718204700p:plain

選択範囲になると、アウトラインが点線になります

 

 

 

 

④いつものように塗りつぶしなどを行う

f:id:pleasure10501:20150718204807p:plain

[RWD][CSS3]レスポンシブデザインのサイト制作・animationで画像を動かす

今日の授業

  1. レスポンシブwebデザインのサイトの作成(テスト)
  2. CSS3のアニメーション

レスポンシブwebデザインのサイトは3時間半で完成した。期限より1時間オーバー。

レスポンシブデザインのサイト(CASA BLANCA)

CSS3のアニメーション

アニメーションのショートハンド

animation-name: anime1;   /*必須!キーフレーム名*/
animation-duration: 2s;   1 回のアニメーション周期が完了するまでの所要時間
animation-timing-function: ease;
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: alternate;  /*100%まできたときに逆再生する*/

  • animation-name

キーフレーム名。必須。 そもそもこれをつけないと動かせない。

  • animation-duration

アニメーション一回分の時間の長さ。5秒なら「5s」。初期値は0。

  • animation-timing-function  

アニメーションのタイミング・進行割合を指定する。
 主にease、linear、ease-in、ease-out、ease-in-outなどのいずれかのキーワードを指定する(値は他にもいろいろある)。  
 初期値はease
 
 http://memopad.bitter.jp/w3c/cssref/playit.php?filename=playcss_animation-timing-function&preval=linear

  • animation-delay

アニメーションの開始を遅らせる時間を指定する
 初期値は0

  • animation-iteration-count

 アニメーションの繰り返し回数を指定する。
 初期値は1。「infinite」を指定すると、無限に繰り返す。

  • animation-direction

 アニメーションを交互に反転再生させるかどうかを指定する。
 値にalternateを指定すると、 奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す。



以上を踏まえて制作したアニメーション2種類。

 

[Photoshop]カスタムシェイプによる切り抜き

以前のおさらい。

カスタムシェイプやテキストの形に他のレイヤーを切り抜く方法

 

f:id:pleasure10501:20150715204337p:plain

f:id:pleasure10501:20150715204342p:plain

①背景レイヤー、カスタムシェイプツールで描いたレイヤーを用意する

カスタムシェイプのサムネイルにカーソルを当て、CTRL+クリックする
 そうすると、カスタムシェイプの輪郭が選択される

③CTRL+Shift+I で、選択範囲を反転

④背景レイヤーを選択する
 すると、選択範囲はそのままに背景レイヤーを切り取れるようになる

⑤Deleteキーで切り抜く 

f:id:pleasure10501:20150715203619p:plain

 

 

④で選択範囲を反転せずに、カスタムシェイプの形そのままを利用することもできる

 

白い背景をカスタムシェイプでくり抜き(わかりやすくするため、下地に色をつけてみた)

f:id:pleasure10501:20150715204647p:plain

[CSS3]animationをつかった様々な動き

授業では、CSS3のアニメーションを3種類使ったページの制作。

①回転するバナー
②入れ替わり表示されるテキスト
③シャドウが変化して光っているように見えるボタン



①回転するバナー

1)2枚の同じサイズの画像をli要素で並べ、position等でピッタリ重ねる

ul#flip li {
  width: 500px;
  position: absolute;
  left: 50%;/*画像が中央にくる*/
  margin-left: -250px;
}

2)3Dアニメーションを有効にする

ul#flip li{
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

3)回転した画像の裏面が見えるかどうかの設定

ul#flip li{
  backface-visibility: hidden; 
  -webkit-backface-visibility: hidden;
}

4)li要素にアニメーションの動きの指定をする

i#front {
  animation: flipFront 5s infinite alternate;  /*flipFront・flipBackがキーフレーム*/
  -webkit-animation: flipFront 5s infinite alternate;
}
li#back {
  animation: flipBack 5s infinite alternate;
  -webkit-animation: flipBack 5s infinite alternate;
}

アニメーションプロパティのショートハンド
①keyframeにつけた名前②アニメーションの時間③ループの回数

alternateは、アニメーションの動きを反転させる為の指定。


alternateがない場合:
  0% → 50% → 100% → 0% → 50% → 100%
表    裏 (最初に戻る)表    裏 

alternateがある場合:
0% → 50% → 100% → 50% → 0% → 50%
表    裏 裏 表   裏


http://kuropanther.html.xdomain.jp/animation/


HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style.css"> 
</head>

<body>
<div id="bg">
<ul id="flip">
<li id="front"><img src="img/01.png" alt=""></li>
<li id="back"><img src="img/02.png" alt=""></li>
</ul>
</div><!--/#bg-->
<div id="news">
<ul class="anime-ticker">
<li>すっと肌に溶け込み、内側から輝く。</li>
<li>使うほどに、潤い肌。</li>
<li>ル・セラム  それはみずみずしく輝く肌へのパスポート</li>
</ul>
</div>
<p class="btn"><a href="#">ご購入はこちら</a></p>
</body>
</html>

CSS

@charset "UTF-8";

body, html, div, ul, li img, p {
  margin: 0;
  padding: 0;
}
img {
  border: 0;
  vertical-align: bottom;
}
li {
  list-style: none;
}
body {
  background :#333;
}

#bg {
  width: 500px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0; 
  bottom: 0;
  margin: auto;
}
ul#flip li {
/*2枚目の画像を1枚目にぴったり重ねる*/
  width: 500px;
  position: absolute;
  left: 50%;/*画像が中央にくる*/
  margin-left: -250px;
/*アニメーションで回転させる記述*/  
  transform-style: preserve-3d; /*3Dアニメーションを有効にする*/
  -webkit-transform-style: preserve-3d;
  
  backface-visibility: hidden;  /*回転した画像の裏面が見えるかどうかの設定*/
  -webkit-backface-visibility: hidden;
}
li#front {
  animation: flipFront 5s infinite alternate;  /*flipFront・flipBackがキーフレーム*/
  -webkit-animation: flipFront 5s infinite alternate;
}
li#back {
  animation: flipBack 5s infinite alternate;
  -webkit-animation: flipBack 5s infinite alternate;
}

@-webkit-keyframes flipFront{
 0% { transform: rotateY(0deg); }
 45% { transform: rotateY(0deg); }
 55% { transform: rotateY(180deg); }
 100% { transform: rotateY(180deg); }
}
@keyframes flipFront{
 0% { transform: rotateY(0deg); }
 45% { transform: rotateY(0deg); }
 55% { transform: rotateY(180deg); }
 100% { transform: rotateY(180deg); }
}

@-webkit-keyframes flipBack {
 0% { transform: rotateY(180deg); }
 45%{ transform: rotateY(180deg); }
 55%{ transform: rotateY(0deg); }
 100%{ transform: rotateY(0deg); }
}
@keyframes flipBack {
 0% { transform: rotateY(180deg); }
 45%{ transform: rotateY(180deg); }
 55%{ transform: rotateY(0deg); }
 100%{ transform: rotateY(0deg); }
}

#news{
  width: 500ps;
  height: 20px; /*1行目だけ見えるように高さを指定するのがポイント*/
  overflow: hidden; /*heightとoverflowはセット*/
  margin: 150px auto 0;
  font-size: 16px;
  text-align: center;
}
#news li {
  background: #333; /*Firefoxで背景が黒くなってしまうので、あえて指定する*/
  height: 20px; /*一番上の1行だけを表示し、下を隠す*/
  line-height: 20px;  /*一番上の1行だけを表示し、下を隠す*/
  color: #FFF;
  padding: 3px;
}
ul.anime-ticker {
  animation: ticker 10s infinite;
  -webkit-animation: ticker 10s infinite;
/* アニメーションプロパティのショートハンド
①keyframeにつけた名前②アニメーションの時間③ループの回数*/
}
/*Chrome用*/
@-webkit-keyframes ticker {
/*1行目*/
  0% { opacity: 0; -webkit-transform: translateY(0);}
  9% { opacity: 1; -webkit-transform: translateY(0);}
  21% { opacity: 1; -webkit-transform: translateY(0);}
  33% { opacity: 0; -webkit-transform: translateY(0);}
 /*2行目*/
 34% { opacity: 0; -webkit-transform: translateY(-26px);}
 43% { opacity: 1; -webkit-transform: translateY(-26px);}
 55% { opacity: 1; -webkit-transform: translateY(-26px);}
 66% { opacity: 0; -webkit-transform: translateY(-26px);}
/*3行目*/
 67% { opacity:0; -webkit-transform: translateY(-52px);}
 76% { opacity:1; -webkit-transform: translateY(-52px);}
 88% { opacity:1; -webkit-transform: translateY(-52px);}
 100% { opacity:0; -webkit-transform: translateY(-52px);}
}
/*Chrome用*/
@keyframes ticker {
/*1行目*/
  0% { opacity: 0; transform: translateY(0);}
  9% { opacity: 1; transform: translateY(0);}
  22% { opacity: 1; transform: translateY(0);}
  33% { opacity: 0; transform: translateY(0);}
 /*2行目*/
 34% { opacity: 0; transform: translateY(-26px);}
 43% { opacity: 1; transform: translateY(-26px);}
 56% { opacity: 1; transform: translateY(-26px);}
 66% { opacity: 0; transform: translateY(-26px);}
/*3行目*/
 67% { opacity:0; transform: translateY(-52px);}
 76% { opacity:1; transform: translateY(-52px);}
 88% { opacity:1; transform: translateY(-52px);}
 100% { opacity:0; transform: translateY(-52px);}
}
/*firefox用*/
@-moz-keyframes ticker {
/*1行目*/
  0% { opacity: 0; -moz-transform: translateY(0);}
  9% { opacity: 1; -moz-transform: translateY(0);}
  21% { opacity: 1; -moz-transform: translateY(0);}
  33% { opacity: 0; -moz-transform: translateY(0);}
 /*2行目*/
 34% { opacity: 0; -moz-transform: translateY(-26px);}
 43% { opacity: 1; -moz-transform: translateY(-26px);}
 55% { opacity: 1; -moz-transform: translateY(-26px);}
 66% { opacity: 0; -moz-transform: translateY(-26px);}
/*3行目*/
 67% { opacity:0; -moz-transform: translateY(-52px);}
 76% { opacity:1; -moz-transform: translateY(-52px);}
 88% { opacity:1; -moz-transform: translateY(-52px);}
 100% { opacity:0; -moz-transform: translateY(-52px);}
}

p.btn a {
  display: block;
  line-height: 60px;
  width: 180px;
  text-decoration: none;
  font-weight: bold;
  animation: shining 5s infinite;
  border-radius: 10px;
  background-color: #da2626;
	background-image: -webkit-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7);
	background-image: -moz-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7);
	background-image: -o-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7);
	background-image: -ms-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7);
	background-image: linear-gradient(to top, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7);
  margin-left: 430px;
  margin-top: 300px;
  text-align: center;
  color: #333;
  box-shadow: 0 0 1px #FFFFFF;

}
p.btn a:hover {
  color: #FFF;
  margin-top: 301px;
}

@keyframes shining {
  0% { box-shadow: 0 0 1px #FFFFFF;}
  50% { box-shadow: 0 0 7px #FFFFFF;}
  100% { box-shadow: 0 0 1px #FFFFFF;}
}