2013-10-04

鏡面反射

photoshop

久しぶりの更新です。

９月に無事Web制作会社に就職が決まり、バタバタしていたのも少しだけ落ち着きました。

久しぶりにPhotoshopを使うと、忘れていることが沢山あってアセアセ。。

とりあえず、忘れないように書留めておきます。

◆このアイコンに鏡面反射をつけます。

１、画像を開いたら、画像レイヤーを複製

２、【編集】→【自由変形】→【垂直方向に反転】

もともとの画像の下にカーソルで移動させる。

３、【選択範囲】で反転させた画像を選択

４、【ベクトルマスクを追加】

５、Command押しながら左クリックで、選択範囲を読み込む

６、【g】キーをクリック　→　グラデーション　→　白から黒　→　乗算　→　透明度５０％　
　　　→下から上にグラデをかける。

【完成】

2013-07-01

色彩・配色

デザイン

webサイトを制作するにあたって、大切な色の決め方。

Illustratorを使った色の決め方。

ウィンドウ→スウォッチライブラリ

この中から自分の探しているイメージを探す

明るいポップな感じのものを探している場合は、
スウォッチ（明）の中から（cs2を使用）

使用する色を始めに決めると、サイトに統一感がでる。

まずは、ベースの色：７０％（一番面積の広い背景の色）、メインカラー：２５％（次に面積の広い色）、アクセントの色：５％（一番強く、サイトの性格を表す色）を決めます。
決める順番は、初めにメインカラーを決めてから、それに合うようにアクセントカラー等を決めていく感じ。

アクセントカラーは、メインカラーから離れた色相にすると鮮やかになる。
メインカラーは、ある程度明度の低いものが扱いやすい。
※メインカラーの明度を上げた色をベースカラーにしてしまうと早い。

その他、スウォッチには、アーストーンやパステルなどなど、色がセットになっているので色選びに迷った時にはオススメ。

2013-06-11

プラグインを使ってパン屑リストを表示させる(追記)

wordpress

5/18日の記事で、Prime Strategy Bread Crumbを導入した件について書いたのですが

今回portfolioを作成している時に引っかかった事があったので書き留めておきます。

前回の記事で、下記のコードを貼付けるとパン屑リストが表示できて、トップページにはパン屑リストを表示させない。ことができた！

<?php if (!is_home()): ?> ←トップページではパン屑を表示させない
          <? $args= array(
                         'type' => 'string' ,
                         'home_label' => 'HOME',
                         );
                         if ( function_exists( 'bread_crumb' ) ) { bread_crumb($args); } ?>
         <?php endif; ?>

と書いたのですが、今回製作中のportfolioで同じように下記のコードを貼付けたんですが、

トップページでパン屑リストが表示されたままでした。

原因は

 <?php if ( !is_home() ) : ?>

のis_home

この記述をfront_pageと変更。

 <?php if ( !is_front_page() ) : ?>
          <?php 
          $args= array(
					'type' => 'string' ,
					'home_label' => 'HOME',
					);
					if ( function_exists( 'bread_crumb' ) ) { bread_crumb($args); }
           ?>
          <?php endif; ?>

これでトップページにはパン屑を表示させないことができました。

ちなみに、私はトップページの[HOME]を固定ページで作成していて、ブログの投稿をindex.phpで作成しています。

前回作っていたサイトは、TOPページのテンプレートを「home.php」で作っていたので [is_home] で問題なく動いたみたいです。

2013-06-09

RSSフィードではてなブログの情報を出力する。

wordpress

functions.phpに下記のコードを記述。

<?php 
//RSSフィードの情報を出力
add_theme_support('automatic-feed-links');
?>

http://d.hatena.ne.jp/ユーザー名/rss　がｒｓｓのアドレスなので、
自分のユーザー名を入れたurlをウィジェットメニューのurlに入力するだけ。

そうすると、サイドバーにちゃんと反映されました。

2013-06-01

gifアニメを作成。

素材作成

まずはIllustraterでイラストを書く。

ファイル→書き出し→ファイルの種類をphotoshop（psd)にする。

Photoshopを開く。

開く→イラレで作ったpsdデータを開く。

ウィンドウ→アニメーション（CS5) をクリック。CS６の場合はタイムライン。

秒数を指定する。

web及びデバイス用に保存。

完成！！

2013-05-24

[]スクリーンキャプチャを撮る便利拡張機能

Chromeの拡張機能
web page screen shot
どのようなwebページでも素早くシンプルな操作でJPEGファイルに保存できます。webページを丸ごとキャプチャ出来る初めての拡張機能です！！優れもの！！
https://chrome.google.com/webstore/detail/webpage-webcam-screenshot/ckibcdccnfeookdmbahgiakhnjcddpki?hl=ja

FireFoxのアドオン
http://pearlcrescent.com/products/pagesaver/

FireFoxのアドオンは、Flashで動きのある画像のキャプチャも撮ることができるので便利！！

2013-05-23

クライアントさんのレンタルサーバー

wordpress

現在、ローカル環境でwordpressサイトを製作中なのですが、

そろそろ本サーバーで動作確認しながらやっていかなきゃなー。と思い、

どんな方法でクライアントさんに提出しようか考えていた。

クライアントさん的には、サーバー料金があまりかからないものを希望しており、
wordpressが動作する環境が必須。

ということで「ロリポップ」を進めていたのだが、

「ロリポップのレンタルサーバー契約しといてねー♪」

って言ってもPCに詳しくないクライアントさんはピンとこないと思う。
というか、私だったら「ぽかーん」（゜Д゜）状態だ。

ということで、どんな方法でクライアントさんに提出するのがベストかを先生に相談してみた。

すると、
ホームページのことにあまり詳しくないクライアントさんなら、こちらでサーバ契約から全てを行いサイトを渡したときからすぐに運用できるようにしてあげるのがベストというアドバイスを頂いた。

ということで、やるべきことをまとめてみた。

１、まず、クライアントさん用にメールアドレスを取得する。（Gmail）
　　※このアドレスに予約のメールや、ロリポップからのお知らせ、wordpressの情報などが届くようにする為。　　
　　　もしも、個人のメールアドレスで登録した場合パスワードを教えてもらったり個人宛に届いているメールを
　　　見てしまうことになる為、お店用に一つアドレスを作るのがベスト！！

２、レンタルサーバを契約する（予約メールや、ロリポップからのメールは「１」のメールアドレスに届くように登録する。）

３、MAMPPのローカルデータをエクスポートして本サーバに移行させる。

４、予約確認のメールが本サーバ上できちんと動作するかの確認。

取得したGmailアドレス、wordpressのログインIDと一緒に完成したサイトの引渡し。

こんな感じの流れでやっていこうと思う。