2014年11月
wordpress
オープンソース コードが公開になっている。
自由な形でブログが作れてしまう。
CMS、コンテンツマネージメントシステムズ
コンテンツ、その内容がWEB上で単純シンプルに構築出来てしまう。
いろんなCMSがある。
商用サイトでCMS
カラーミーショップ
通販できるようなもの
販売のショップを作れてしまう。
ECキューブ
phpで開発されており、データベース管理システムとしてMYSQLを利用している（サーバー上で動作）
GPLライセンス、使用者に対して、コードを含めた再配布や改変を認めている
wordpressの魅力
無料
ダッシュボードで簡単管理
テーマが豊富（見た目のデザイン）
プラグインが豊富 問い合わせホーム、SEO対策
デメリット
動的にページを生成するので、表示が遅い
細かい調整は結構ハードルが高い。
wordpressの仕組み
動的にページを生成する
文書構成 header.php等
テンプレートタグを使用
<?php get_header();?>
ヘッダーのファイルをここに読み込みますよ。
テンプレートタグを使いこなせるかどうかでwordpressを使いこなせるかが決まる。
テンプレートタグたくさんある。
自分の作ったサイトをwordpressに落とし込む
これをやると仕組みが分かる。
wordpressをここに展開する。
C/xampp/htdocs/
pointは１．アンドロイドSDKっていうのを使う。
パソコンと繋ぐドライバインストール
ダウンロードする。
２．OSのイメージファイルさえ用意すれば、どうにかすればできる。
１．２を用意すればどうにかすれば出来る。
bootrorder
wordpressをダウンロード
xamppのhtdocsにそのファイルを入れる
xampp立ち上げ、mysqlのadminをクリック
root
rootを入力
パスワードを入力
上のデータベースから
wordpress 照合順序をutf8 general ciで作成ボタンを押す
ブラウザを立ち上げて、localhost/wordpress/をアドレスバーに入力
そのまま進む
スラッグはURLのディレクトリになる。
半角英数で入力
カテゴリは二つまたぐようであれば両方にチェックでもOK
index.phpと
style.css
screenshot.jpg
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
utf8を表示するテンプレートタグ
<meta charset=”<?php bloginfo(‘charset’); ?>”>
タイトルを表示するテンプレートタグ
<title><?php bloginfo(‘name’); ?></title>
</head>
<body>
</body>
</html>
DWを使って編集するには、サイト管理で定義してやる必要がある。
オリジナルテーマのフォルダを選んであげると
ファイル管理タブに
style.css
screenshot.jpg
index.phpの３個のフォルダが出てくる。
DWで編集する際は、サーバー定義しないほうが良い。
Contact Form 7
インストールするとメニューにお問い合わせというメニューができる。
メタスライダー プラグイン
カスタムフィールド
専用の入力スペースを作る
使用アプリ photoshop
制作時間
使用素材 ～～ブラシ
サムネイル画像
カスタムフィールドをカスタムできるプラグインがある。
wordpressのメディアのアップで画像は名前が日本語だとだめ、また使えない英数字以外でも受け付けないためちゃんと表示されなくなる。
wordpressであればこれ必須
ALL in one seo packのプラグインを入れればこれらすべてを含むのでＯＫ
プラグインがいっぱい入れちゃっている人は
これ使う
http://webcre-archive.com/2012/10/04/wordpress-db-url-replace/
wordpressが使える無料サーバー
http://www.daiwa-hotcom.com/
2014年11月23日 12:11 PM|
カテゴリー：未分類|
コメント(0)
グリッドデザイン倍倍
グリッドデザインのような1pxでもずれちゃ駄目なものは必ずリセットcssをかける。
2014年11月23日 12:02 PM|
カテゴリー：未分類|
コメント(0)
static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されず、初期値に配置します。（個人的に使わないです）
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです）
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となり、top、bottom、left、rightは適用されます。（個人的に単独では使わないです）
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。（IE6は対応出来ていません…）
position使う場合は必ず、幅と高さを指定する。
ポジションは前に使っていれば、前に出ていたものが基準になる。
なければbodyが基準になる。
2014年11月23日 11:57 AM|
カテゴリー：未分類|
コメント(0)
phpはサーバーで動く言語
サーバーがある人は擬似環境を作る必要はない。
ランプ
LAMPP リナックス、mysql php perl
XAMPPの導入でサーバーの擬似環境をつくる。
ザンプ
http://felica-portfolio.com/php_lesson/
XAMPPを検索した最上のもの
https://www.apachefriends.org/jp/index.html
ここからダウンロードする。
skype
port80番
xamppも同じ80番なので、競合してしまう。
チェックボックスはずすところがある。
ファイルの収納場所等を選んだ後辺り、会社の誘導のやつが出るところ一箇所チェックをはずす。インストール手順の手前。
セキュリティーの重要な警告が出たら、プライベートネットワークを選択して、クリックする。
１．php.iniの設定をする。
ウインドウズボタンとEを一緒に押すとエクスプローラーが立ち上がる。
そこにC:xamppphpを入れる。
教科書通りにやるとやばい
２．php.iniの変更確認
versionをちゃんと確認しないと動かない。
３．セキュリティの設定
この時、MYSQLが青くなっていないと駄目
これで上から3つが安全。
一番下が不明でOK
C:xampphtdocsで新しいフォルダを作成。
ブラウザを立ち上げて
localhost/hamada_php/lesson01.phpと打つ
localhostと打つとhtdocs直下を見に行く
localhost htdocsのフォルダ名、ファイル名
localhostで見た時にエラーが出る。エラーが出た時は上も怪しいと思ったほうが良い。
自分自身を指し示すIPアドレス
localhost=127.0.0.1にlocalhostが振られている。
スカイプと競合してしまう場合の対処法
コンパネから、Apacheのconfigから一番上を選択
listen80を81にする
serverName localhost:も81に変える
そして、ブラウザで表示する際には、localhost:81/を足さないと駄目
phpとmysqlの連携でデータベースから出したり入れたり出来るようになるので、新着ニュースを作れるようになる。
エクリプス
Eclips
PHPの辞書みたいなものがある。
https://php.net/manual/ja/index.php
word pressのダウンロード
https://ja.wordpress.org/
特殊記号の読み方サイト
http://penjp.com/50pc_use/pc_use_9_2.html
！ 感嘆符 ビックリマーク，びっくり
” 引用符 ダブルクォーテーション，二重引用符
＃ 番号記号 ハッシュ、シャープ、イゲタ
＄ ドル記号 ドル，ダラー
％ パーセント パーセント
＆ アンパサンド アンド，アンパサンド
’ アポストロフィ, アクサンテギュ シングルクォーテーション，クォート，
アポストロフィー
（ 左小括弧 括弧，丸括弧，左丸括弧
） 右小括弧 括弧閉じ，丸括弧閉じ，右丸括弧
= 等号 イコール
– ハイフン, 負記号 ハイフン, マイナス
~ オーバーライン チルダ，チルド
^ アクサンシルコンフレックス 山形、ヤマ、ハット
| 縦棒 パイプ
￥ 円記号 円マーク
shift+@マーク ‘ アクサンクラーブ バッククォート
＠ 単価記号 アットマーク，アット
｛ 左中括弧 中括弧
[ 左大括弧 角括弧，左角括弧，大括弧
＋ 正符号 プラス
； セミコロン セミコロン
＊ アステリスク アスタリスク，アスター
： コロン コロン
｝ 右中括弧 中括弧閉じ
] 右大括弧 角括弧閉じ、右角括弧，大括弧閉じ
< less than 不等号（より小） 不等号（より小） 小なり
, コンマ、セディユ コンマ カンマ
> 不等号（より大） 大なり
. ピリオド ピリオド，ドット
？ 疑問符 クエスチョンマーク，はてな
/ 斜線 スラッシュ
_ アンダーライン アンダースコア アンダーバー
バックスラッシュ
こっから下はあまり重要じゃない
「 始括弧 かぎ括弧
」 終括弧 かぎ括弧閉じ
～ スワングダッシュ
、 読点 てん
。 句点 まる
・ 中点 なかてん
ー 長音符号 長音符号，のばす
日本語
3byte utf8
半角英数
1byte
strlen()
メールフォームはCGIを勉強する
メールホーム設置ＰＨＰ
文字列はstring
tableは
インポート、エクスポートでファイルを保存することができる。
カラム 縦の項目の見出しをカラムという
レコード 実際の値が入っている行はレコード
row 行のこと
主キーデータを取り出す時の基本になる。codeなど重複がない1～１００
newsfeedを作るには
見出し、日時、記事（本文）ニュースコード（主キー）
名前はnews_idにした
データ型 数値はINTに設定 普通の数値型はINT
インデックスを PRIMARY主キーを表す言葉 PRIMARYキーとも言う。PRIMARYに設定
AIにチェック インクリメント増加 自動で追加させる 自動で連番
news_headline
データ型 VARCHAR 短いテキスト
長さ１２８
照合順序 utf8-general_ci
news_article
データ型 TEXT
照合順序 utf8-general_ci
news_date
データ型 DATETIME
データ型の基準は文字の長さで決めている
ここまで入力したら、保存ボタンを押してテーブル作成
その後、newsを選んで挿入
news_idは自動生成なので入れる必要ない。
headlineと本文を入力し、時間を選んであげると記事ができる
2014年11月23日 11:53 AM|
カテゴリー：未分類|
コメント(0)
フラッシュアニメーション
文字もシンボル化しない透明度、色の微妙な変化等出来ないアニメーションがある。
シンボル化
インスタンス配置
モーショントゥウィン
キーフレーム
花びらを動かすとかの複雑な動きを付けるのは、シンボル自体に動きを付けて更にステージに置いたインスタントにも動きを付けることにより、ダブルの動きになる。
iosアイフォンでもみれるようにgoogleでswiffyを検索swiffyの画面。参照でフラッシュで作成したswfファイルを選択する。そして、下の方に出てくるhtmlファイルを右クリックで保存する。３D回転はうまく出ない。
flashがIOS IPHONEで対応していなかったため、流行らなくなったため使われなくなったが、flashがhtml5での書き出しができるようになったので、今また見直されている。
TOPにムービーファイルだけだと、SEO上良くないからフラッシュ使われなくなった。
java scriptで書き出されるが、headが重くなるので、外部ファイルにscriptを書き出す。
このswiffyでjava scriptで書き出せば、swfファイルは一緒にあげなくて良い
2014年11月23日 11:47 AM|
カテゴリー：未分類|
コメント(0)
レイアウトの話
１．縦の順番
通常人は上から下に目が行く
重要度高いものから上に置く
２・横の順番
左から右に動く
naviはやっぱり左が良い
３．グリッドレイアウト ノート参照
４・ホワイトスペース ノート参照
視覚的にmarginでブロックを分ける。
デザインの4原則
・整列の原則 きちっと並べる
通常は左寄せ
伝統的な格式あるものは中央寄せ
レストランのメニュー
映画のエンドロール
・近接の原則
関係性があるものは近づける
・対比の原則
コントラストの強弱をつける
文字の大きさの対比
色のコントラスト
青と黄色
明るいものと暗いもの
・反復の原則
色彩
物体色、反射される色が見えている。
光源色そのもの自体が光を発している
モニター、テレビ
ＲＧＢ
光の三原色
ＣＭＹＫ
色のインク
ＣＭＹを混ぜても黒にならないので、黒がついている。
色相＝色合い
彩度＝鮮やかさ
明度＝明るさ
この三つをトーンと読んでいる
2014年11月23日 11:44 AM|
カテゴリー：未分類|
コメント(0)
webサイト制作のワークフロー
１．コンサルティング
相手がどういうものを作りたいのか
実際の効果を出す。成果を出す。
売り上げを上げる、問い合わせを増やす。
コンサルティングの際にヒアリングシートを使う。
２．企画
社内に持ち帰り、具体的にどのようにしていくかを練る。
３．プレゼンテーション
雰囲気を伝えるため
まだコーディング等はしない。
イラストレーター
photoshopで作ることが多い
写真や文字はダミーで良い
４．デザイン
背景やボタンなどのデザインを作成する。
５．コーディング
６．納品
７．維持・管理
ＳＥＯ上サイトマップは作ったほうが良い
ＴＯＰの下に作るのが方が良い。
最近の流行はＴＯＰページの一番下。
相互リンクもＳＥＯ上良い
同業種、関連企業など。
2014年11月23日 11:43 AM|
カテゴリー：未分類|
コメント(0)
ctrl Aですべて選択
ctrl Cでコピー
ctrl Vで貼り付け
ファイヤーホックスでは
CTRL shift Mでスマホのサイトがすぐに見れる。
2014年11月23日 11:42 AM|
カテゴリー：未分類|
コメント(0)
ダフォントドットコムでフォントを探す。
非常に勉強になるサイト
CODE PREP
http://codeprep.jp/
nipponcolors.com
動画素材
http://mazwai.com/
動画素材
nhkクリエイティブライブラリー
ダウンロードしてきた動画がmp4じゃなかった場合
アイムービー
windowsならムービーメーカーでもエンコーディングできる
解像度も比率も変更できる
にじログの人気ページの中の
http://nijilog.info/
画像素材のページ
これの良いところは画像がデカイこと
素材は大きいものを用意するのが基本
http://www.morguefile.com/archive/
ping24が一番高品質
16対９
横幅1400px
pingをすごい圧縮してくれる
TinyPNGがいい
ヘッダー画像とすごいでっかい画像のときだけやれば良い
https://tinypng.com/
イケテルサイト
http://www.ikesai.com/
ここはヘッダーの素材サイト
http://www.twitterimagesheader.com/
人型ピクトグラム
http://seo.siyo.org/webcustom/seo11050/
HTML5 css3のサポート状況が分かる
http://fmbip.com/litmus/
css3のボタン作成便利サイト
http://colorzilla.com/gradient-editor/
7色と
http://h2ham.seesaa.net/
ブラウザに応じてcssを振り分け安くするため、htmlにclass名を付与してくれる
http://modernizr.com/
www.flapism.jp
超良いサイト実際に開発する人向けサイト
webクリエイターボックス
http://www.webcreatorbox.com/
コリス
http://coliss.com/
2014年11月23日 11:40 AM|
カテゴリー：未分類|
コメント(0)
jQueryで画像を挿入する場合
html <p id=”first”>画像が前に入るよ</p>
jQuery $(“p#first”).prepend(‘<img src=”flower.jpg”>’);
シングルコーテーションを使う。
ダブルコーテーションとシングルコーテーションの両方を使って、画像を配置する。
jQueryは最新のバージョンのものを選べば良いというものではない。
バージョンによって動かないものもある。
ライブラリーとはそういうこものなので全部覚えなくてよい
divでクラスかＩＤつけたら、floatを一個つけても他にはかからないので、すべてにfloatをかける。例jQueryのフランス国旗
jQueryで
ボタン一つでテーブルの上に料理が出てくるようにする。
クリスマスツリー
freamwork.js
サムネイル 200×133 の画像
大 600×400 の画像
画像は二つ必要
jqueryを使う場合スクリプトをgoogleライブラリーから持ってくると思うがその際、http:を忘れると動かない
<!–http:を忘れると動かない–>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
fancybox高機能な割りに簡単
http://fancyapps.com/fancybox/
１，２があるが２は商用駄目１はok
Fが大文字は商用ＯＫ背景が白いほうが２
http://flexslider.woothemes.com/
flexslider２ パソコンにもスマホにも対応している。
ダウンロードする。
必要なのは2つだけ
jquery.flexslider.js の1091と1092行目のダブルクオーテーションの中身を消す
flexslider.css の71から73行目を消す。
あとはflexslider２のところでjsをheaderのscriptの中に入れる
jQueryプラグイン100選で検索する
http://www.creatorsbank.com/
http://liginc.co.jp/web
http://sercus.jp/
2014年11月23日 11:16 AM|
カテゴリー：未分類|
コメント(0)
バックアップは、そのパソコンがおかしくなったときの為のもの
バックアップを取っておいてもそのパソコンのハードがダメになったらダメ。
大切なデータは外付けに保存しておいた方が良い
引越しとバックアップは違う
引越しは他のパソコンにそのパソコンのデータを引っ越せる。
こっちなら、大丈夫だが、前のパソコンのデータは問題ないとのこと
バージョンもあわせる必要ないとのこと
2014年11月23日 11:14 AM|
カテゴリー：未分類|
コメント(0)
上位表示できる
meta情報をいじって
検索エンジンに読ませ方を変えると
ソースが良いと上位表示できる。
クローム拡張機能HTML5アウトライナーOuto
見出しが一番大事
見出ししかクローラーが見ていかない
何をＨ2にするか
パラグラフ概念
webは起承転結ではダメ
小論文、レポートの書き方サイト
<header>
<h1>
<p>
</header>
<section>
<h2>
<p>
<ul>
<li>
h4までしか読まない
meta情報とh1とが上手く
結論header⇒検証⇒結論
かくはん
切り抜き
あとで、サイトのアウトライン
st-image.com/stfeature/ft-140708/
ハブ
外部リンクをたくさん作る
googleのサーバー上にあるデータしか読まない
アクセス解析が出来るＷＥＢマスターツール
ファーストビューが大切
テキストが大切
200行の中に必要な文書構造を書いてあげないとダメ
画像ばっかじゃだめ
正しい文法で書くのが最優先
すべてにおいて最優先はｐ
カラムの順番が大事
ケンコーコム
ウェブディベロッパーツール
phpじゃダメ
.htmlにしないとだめ
上位表示しているページのソースを読み解くことが必要
meta name=”description” content=”ここと”
<title>ここ</title>
が同じであれば上位表示される。
webデザインの勉強 助詞が一個入っている。
静的なページで良い。
バリデートでエラーがあったらダメ。
colorilla
html validator
web developer
pealCrescent（画像、動画を保存）
デベロッパーツール
検索の力が大切
王様の耳はロバの耳 王様の名前
困ったときのサントリー
補色は黄色と青の補色が一番強い
サークルの反対が補色
補色が一番良い。
青い冷たいもの
コントラストが強いものが一番受け取れる
明度は時間軸と関係がある。
白：未来
黒：過去
はてなブログ
イラストレーターとは
シンメトリー（対称）を作るツール
世の中はシンメトリーで出来てるよ。
ベクトルデーター
力の方向
力の大きさ
コンピューターっていうのは必ず理屈がある。
pc
5 -2 7 +2
成功している人の真似をするとそういう思考回路になる。
デザインワークス
キーオブジェくト
パスファインダー
レベル補正
アンシャープマスク
ドロップシャドウ
写真のトリミング
皿をはみ出させることによって大きく見える
シャドウハイライト
レベル補正
シャープのアンシャープマスク
値をいじっちゃダメ
初期設定で使う
文節
社会に認めてもらうと色とは
紺とかうすいグレー
濃いグレー
写真の色を生かすような色を使う
補色の原理を使う。
デザインの理屈
Ｚで見ていく
人は真ん中は読まない
ファイヤーホックスでは
CTRL shift Mでスマホのサイトがすぐに見れる。
flashはベクトルとビットマップを行ったり出たり出来る。
今需要ある。
float浮き上がる
ピクセル
rgb
cmyk
webtrafelica@gmail.com
yahooを使ってgoogle.comの対策をすると
まずyahoo。
xdomainこっちの方が良い
freeweb
キーハイフンキー だと両方キーワード
キー＿キー 両方で一つのキーワード
下にたくさんのリンク集を入れることで
ハブ化できる。
画像はpngで作る８ビットと24ビット
SEOに関して、
google 検索エンジン最適化スターターガイドで検索すると、PDFファイルでグーグルがこういっているというのが確認できる。
HTMLは重要度順に上から書く。
google.com
google Analyticsの使い方は、登録して
何個でもできる。
indexの締めのbodyの１行上にトラッキングコードを埋め込む
2014年11月23日 11:12 AM|
カテゴリー：未分類|
コメント(0)
htmlのimgタグの中のwidthとheightにはpxピクセルであれば単位を入れない
フォルダ及びファイル名の決まり。
半角英数のみ
半角スペースは使わない
数字が頭に来ない
数字しかないのも駄目
index.html
その他のファイルは、その内容を表すファイル名が良い
画像を入れたファイルはimgフォルダ
cssを何個か作る場合cssというフォルダをつくりその中にcssのファイルを入れる
jsというディレクトリ（フォルダ）を作ってjavascriptのファイルをお入れる。
2014年11月23日 11:03 AM|
カテゴリー：未分類|
コメント(0)
デザイナーお勧めのフリー素材
白地図って検索すると、無料でダウンロードできる。
2014年11月23日 10:55 AM|
カテゴリー：未分類|
コメント(0)
表示のコードビューオプションのワードラップをすると
自動で折り返されるようになる。
DWのテンプレートフォルダはサーバーには必要ないので、ＵＰしないこと
originalフォルダに保存する。
html５文法チェックサイトもあるがドリームウィーバーのバリデートチャックでもOK
2014年11月23日 10:55 AM|
カテゴリー：未分類|
コメント(0)
ベクトルデータ形式のデータを扱う
計算で書かれてある
点々じゃない。
どこまで拡大しても円は円
ロゴ
ボタン
地図
タイトル文字
データ軽い
イラストレーター
adobeは編集の一番下が環境設定になっている
ＲＧＢはＷＥＢ
ドキメントプロファイルをＷＥＢにする。
1px
印刷用のデータCMYK
黒の矢印はオブジェクト全体を選択する
白の矢印ダイレクト選択はアンカーポイントを選択できる
オブジェクト
地図作るときは
道路レイヤー
建物レイヤー
文字レイヤーとすると管理が楽になる
そして出来たレイヤーにはレイヤーパネルからロックをかける
バウンディングボックス、表示の設定
楕円三つ
パスファインダー合体
イラストレーターコントロールＤ
繰り返し
イラストレーター
テキスト
書式
アウトラインを作成するとグラデーション作成できる
イラストレーター繰り返し ctrl＋D
LEAF回転ツールはALTキーを押しながら、中心となるところをクリックする
著作権のある画像もイラストレーターライブトレイスを使う。
イラストレーター開いたら、表示をピクセルビューに直す
ctrl＋shift＋Gでグループ化解除が大切
トレースオプション
svgデータはベクトルデータなので劣化しない。拡大しても
svgデータをテラパッドで
svgイラスト集で検索する。
イラストレーター
550px×400px
フラッシュを見越してこの大きさで作る
cmyk
スクリーン72ppi
ppiは何の略pixlパーインチ
文字は必ず書式からアウトライン化する。
その後グループ解除
アートペイントブラシを選択
アートインクブラシ
ウインドウからグラフィックスタイル
ドラッグして離すと登録される
文字だけじゃないとだめ。
しぶきを入れちゃうとだめ
鎖のハーモニーリンクをクリック
フラッシュ立ち上げ
イラストレーターで作ったデータをコピー貼り付け
ビットマップでペースト
修正から分解
空白キーフレームを挿入
アクションstop();を挿入
2014年11月23日 10:51 AM|
カテゴリー：未分類|
コメント(0)
ビットマップ形式のデータを扱う
点々の集まり
写真
データ重い
photoshop
カラー
スオッチ
色調補正
ヒストリー
レイヤー
ブラシサイズのショートカット
ＡＬＴキー＋マウスの右ボタン＋マウス左右に動かす。
拡大縮小
ＡＬＴキー＋マウスホイール
マスクモード中
Ｘで描画色と背景色入れ替え
トーンカーブのスポイト使える
黄金比１：１．６（５：８）
名刺、ピラミッド
縦横の比率
白銀比１：√２（５：７）
photoshop
月と花火
黒を表示させない
レイヤー効果を通常からスクリーンにする
1.定型サイズで切り抜き
2.フォトショップで画像補正
3.web用に画像を保存する。イタリアンの今回の場合はjpgが良い
フォトショップでは、画像の左下のところをクリックすると画像の大きさがわかる
ファイルの形式
色数 透過 アニメ
gif 256 使える 使える 新発売で赤で反転させて使う。
jpg 1677万色 使えない 使えない
png 1677万色 使える 使えない
png画像は少し重くなる
photoshopの画像の合成は、レイヤーを新規で作ってそこに画像を移動させてレイヤーメニューからレイヤースタイル、レイヤー効果で描画モードをスクリーンにすると黒が抜ける
photoshop
トーンカーブ、レベル補正、レイヤースタイル
レイヤースタイルレイヤー毎に効果が設定できる
メニューからの色調補正は画像に直接かけてしまうが、色調パネルからレイヤーにコントラストをかける方法なら元画像はいじらないでかけられる
gifアニメーション
レシピの説明をだして最後に完成の画像
車がポット出てきてカーショップの店の看板画像
レベル補正
アンシャープマスク
ドロップシャドウ
写真のトリミング
皿をはみ出させることによって大きく見える
シャドウハイライト
レベル補正
シャープのアンシャープマスク
値をいじっちゃダメ
初期設定で使う
どこに何をするかを決める
画像を見極める。
背景が白なら、選択ツールで背景の白を
選択して反転する。
影がある場合はshift押しながら＋していくことも出来るし、
どうしても出来ない場合はペンツール
photo shopで画像の大きさを変えるのは、イメージ画像解像度で大きさを変更する。
いらないところを切り取りたいなら、いらないところを切り取って、画像解像度で大きさを変更する。
photo shopはブラシ機能が大切
photo shopもイラストレーターも一個戻すのはコントロール＋Ｚ
photo shopでたくさん戻したい場合はヒストリー
イラストレーターの場合はコントロール＋Ｄ
消したい
場合は
deleteで消す。
photo shopでブラシで花びらを散らす。
ペンツールのアンカーポイントは曲げるとこだけで良い
photo shop ブラシ炎で検索するとたくさん転がってる。
photo shopで切り抜きツールを使う時、縦と横の幅が合わないときははみ出して○をして、
背景画像はスタンプツールで塗り直す。
photoshopのブラシは最高。
レイヤーには必ず名前を付ける。
クリッピングマスク
１.画像なんでもOK、開く
２.レイヤー作成して文字を打つ
３.画像の背景を右クリックでレイヤーに変更
４.テキストのレイヤーを下、画像のレイヤーを上にする。
５．画像レイヤーを選択してレイヤーメニューから、、クリッピングマスクを作成する。
ボタンの作成
シェイプ
グラデーションオーバーレイ
レイヤースタイルでもグラデーションがかけられる。
そして、レイヤーマスクでもグラデーションがかけられる。
こうすれば二重にグラデーションがかけられる。
photoshopでブラシを入れる場所
cドライブ プログラムファイルズ adobe photoshop presets Brushesに
ダウンロードしたブラシのフォルダを入れる
バナーデザインアーカイブサイト
http://banner.keizine.net/
１．photoshopで新規作成300×250
２．イメージ画像解像度の横幅を500px位にする
横幅500にする理由は、動かせるので使う場所を選ぶことができるので、
大体倍くらい
３．スポイトツール
４．境界線を書く ctrl+aで全選択 編集メニューから境界線で5px 内側
こっちはレイヤースタイルじゃない
５．フォントスタイルはvijaya
こっちはレイヤースタイル
整列ツールは基準になるレイヤーも選んであげないと駄目、動かしたいものと基準のレイヤー
webダウンロードしてくると、レイヤーを確認するとインデックスになっている。
インデックスのままではいじれないので、イメージのモードをRGBに戻さないとコピー スタンプツール使えない
クリッピングマスク、背景という名前だと動かせなくなる。
グラデーションレイヤーを一番上に持ってくる。
alt押しながらマウスみたいな形が出てきたら押す、もしくはグラデーションの背景からクリッピングマスクを作成するを選択
photoshop スマートオブジェクトでビットマップデータをベクトルデータっぽくできる。
photoshop ウインドウ エクステンション
photoshop
ctrl+レイヤーのサムネイルをクリック
目ん玉消す 背景を選んでバックスペースボタンを押す
photo shop ポリゴン
ショートカット ほとんどショートカットを押しながら
顔なら、半分作ってコピーするだけ
髪は駄目だけど。
多角形選択ツール
オプションバー一番左、ぼかしなし アンチエイリアスなし
ctrl+f もしくはフィルターのぼかしから平均
ctrl＋＠ もしくは表示非表示からグリッドを出す
グリッドにスナップをさせる
表示のメニューからスナップでグリッドにチェックを入れる
編集メニューから環境設定
グリッド、グリッド線５px 分割数１
ctrl＋ｊ
パネルメニューオプションでレイヤーの範囲のみ表示
アクションチョー使える
actionパネルを出す。
新規アクション
poligon new layer
poligon
多角形▲選択 ctrl＋ｊ
ctrl＋サムネイルクリック
ctrl＋f
新しく作った例やの名前変える
背景しにレイヤーを戻す。
アクション停止
fanctionに登録する
レイヤーを選択
レイヤースタイル
サイズ1px
中央
白
右クリック、レイヤースタイルをコピー
レイヤースタイル
背景グラデーションオーバーレイ
円形
レイヤーマスクで半分でCGと半分は実写
フォルダにpoligonをすべて入れる。
そのフォルダを選択して、マスクのマークをクリック
photoshop
編集のメニューからパターンを定義する。
パターン登録したら、編集から塗りつぶしを選ぶ
切り取ったところを光彩外側をかけると、ごまかせる。
選択範囲
色域指定
色で取れる
画像の色を変えたい場合は、photoshopの色相彩度で、色彩の統一にチェック入れて色を変えちゃう。
どっかから、持ってきた画像をそのまま使うのはって言う場合にこれを使う。
2014年11月23日 10:51 AM|
カテゴリー：未分類|
コメント(0)
カラーコードは１６進法を使っている
０ １ ２～ ９ A B C D E
１０ １１ １２～ １９ １A ２B
RGB（レッド、グリーン、ブルー）
赤＃ ff 00 00
ぞろ目の場合は一桁省略できる
2014年11月23日 12:32 AM|
カテゴリー：未分類|
コメント(0)
＃＝ハッシュマークという
コピーライトCopyrightは著作権のこと 小さく書く
Xhtml<address></address>連絡先が開く
html5では<small></small>タグを使う
©
&××;こうする事で丸cとする。
絶対参照>=> <=<
｛ ｝呼び名 中括弧 ブレース
ピクセルpx 点々のこと
½2分の１を表す特殊記号
2014年11月23日 12:29 AM|
カテゴリー：未分類|
コメント(0)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>html5の文書構造</title>
</head>
<body>
<h1>html5の文書構造</h1>
<p>この項はhtml5の文書構造の説明頁です。</p>
</body>
</html>
ドックタイプは重要
基本的には半角英数が基本
文書型宣言 <!DOCTYPE html> htmlのバージョン５
<html>～</html>をhtml要素という
<html lang=”ja”>lang=”ja”
属性 属性値
○＝”××”の形
<head>～</head>をhead要素という
文書の情報
<head>
キャラセット
文字コード<meta charset=”utf-8″>文字コードが書かれている
頁タイトル<title>html5の文書構造</title>
ブラウザのタグのところに表示される。
metaタグも空タグ
タイトルはSEO上超重要 シンプルな方が良い
文法きちっとかくこと検索エンジンにも有効
</head>
body要素 表示内容
ブラウザーで表示される内容
<body>
<h1>html5の文書構造</h1>
<p>この頁はhtml5の文書構造の説明頁です。</p>
</body>
</html>
HTMLは上から順番に表示していくから
順番に書いていけば良い。
改行タブブラウザに影響がないのでこのように作成する。
コーディングする際に
必要であればブロック分けをする
空タグ文章の内容が上下で全然違う場合
<hr>区切り線
終了タグがないこういうものを空タグという。
<br>タグ 空タグ
idは一個しか使えないので、複数色とかを変えたい場合は
複数使えるclass属性を使う。
pタグでsmallタグをくくってcopy rightを書く
HTML
<span class=”red”>色を変えたい文字</span>
<span class=”blue”>色を変えたい文字</span>
CSS
spanを分けるのは＃マークじゃないので気をつける
span.red{
color:red;
font-size:25px;
}
span.blue{
color:blue;
font-size:25px;
}
2014年11月23日 12:26 AM|
カテゴリー：未分類|
コメント(0)
« 過去の記事
