Photoshopでのマスク処理
画像のマスク処理
マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。
Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分けることによって、より効率的にデザインをすることが可能です。
クリッピングマスク
クリッピングマスクは、切り抜きをしたいレイヤーのすぐ下にあるレイヤーの形に切り抜くことができます。
切り抜きは、文字でも図形でも手書きの図形でも可能です。
クリッピングマスクを作る場合は、レイヤーの順番に注意が必要です。
- 切り抜きたいレイヤーが上
- 切り抜きたい形が下のレイヤー
レイヤーマスク
選択範囲からマスクを作成します。
ブラシ・消しゴムなどでマスクの形を変更できるため、細かい微調整をしたい場合に向いています。
また、グラデーションツールを使う事で、徐々に変わる画像合成などが可能です。
css基礎
CSS（Cascading Style Sheets）
CSSとは、HTMLの要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。
h1やpなどの意味付けはHTML
色や大きさやレイアウトなどはCSS
エンベットによる記述方法
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> </body> </html>
外部ファイルによる記述方法
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html>
CCSの記述ルール
最初に覚えるべきプロパティ
- color = 文字の色
- font-size = 文字の大きさ
- background-color = 背景の色
- width = 横幅
- height = 高さ
- margin = 要素の外側の空き
- padding = 要素の内側の空き
- border = 線の種類・太さ・色を指定する
主な線の種類
- solid = 1本線で表示されます。
- double = 2本線で表示されます。
- dashed = 破線で表示されます。
- dotted = 点線で表示されます。
Web Developer
1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っていて、非常に便利なのでぜひ導入しましょう。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS基礎</title> <style> h1{ font-size: 40px; color: cadetblue;/*文字の色*/ background-color:beige;/*背景色*/ width:50%;/*画面の半分の幅*/ text-align:center;/*文字の位置*/ margin-top:100px;/*要素の外側の空き*/ margin-left: 200px; padding-top: 50px;/*要素の内側の空き*/ padding-bottom:50px; } </style> </head> <body> <h1>大見出し</h1> </body> </html>
index2.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>marginのショートハンド</title> <style> html,body,h1,p{ margin: 0; padding: 0; } h1{ width: 400px; height: 400px; background-color:darkgrey; margin:0 auto;/*左右をautoにすると真ん中に来る*/ text-align:center;/*文字を真ん中*/ padding-top:200px; } p{ width: 300px; font-size: 20px; color:cadetblue; border-left:10px solid cadetblue;/*線幅、線の種類、色*/ margin-left:50px; padding-left: 20px; } </style> </head> <body> <h1>メインタイトル</h1> <p>メインタイトルの説明文</p> </body> </html>
Photoshop基礎
Photoshopの基本的な使い方
Photoshopで行う作業は大きく別けると以下の３つ
- 画像を作る。
- 画像を補正する。
- 画像を加工する。
・Photoshopの初期化
目的は、無駄に消費されているメモリの記憶をリセットすること。
アイコンをダブルクリック等で起動。
このとき［Ctrl］＋［Alt］＋［Shift］を押したままに。
Adobe Photoshop設定ファイルを削除しますか？」とダイアログがでる。
- カラー設定は「Web・インターネット用 － 日本」
- 環境設定で注意する所は「単位・定規」Webは必ずPixelに。
- ヒストリーの数を増やすと便利だが、増やし過ぎるとメモリーが足りなくなる。
・選択範囲を取る
- 選択ツール
- 自動選択ツール
- マグネット選択ツール
などで選択範囲を取る。
微調整はクイックマスクモードで作業する。
・画像間の移動
別のファイルに選択範囲を切り取って移動
- 「練習_1」→「sky.psd」と「ダッキー.psd」を開く。
- 「ダッキー.psd」の中から選択範囲を決める。
- 「選択ツール」で選択範囲を「tsky.psd」の画面の上に移動する。
- ダッキーちゃんをちょうど良い大きさに「自由変形」で変更する。
HTML基礎
マークアップ とは、機械が文書の構造を認識出来るように、文書の各要素に目印を与えて行く事です。 見出しや段落などと言った紙の文書では当り前にある要素だけでなく、ハイパーリンクのアンカーなどのようなハイパーテキスト独自の要素なども、マークアップに依り認識が可能になります。
要はコンピュータが解るように文章を構造化する事です。マークアップしなくてもブラウザーに文字は表示は出来ますが、その状態では意味や構造を持つ事が出来ません。マークアップする事で構造や意味を明確にしましょう。
HTMLの文章構造には厳密なルールがあり、そのルールに沿ったマークアップを心がけましょう。
では実際にマークアップをしてみましょう。
新規ファイルを作る
ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。
ファイルの保存
まず中身を記述する前に必ずファイルの保存をしましょう。ファイルを保存する場合は、［ファイル］メニュー →［名前を付けて保存］を選択し、［ファイルの種類］を選択し、ファイル名を入力します。この時必ず［ファイルの種類］はHTMLファイルを選択します。
上書き保存
ファイルを上書き保存する場合は、［ファイル］メニュー →［上書き保存］を選択（または、［上書き保存］ボタンをクリック）します。しかし、いちいちメニューからコマンドを選んでいると作業効率が悪いので、授業ではショートカットを積極的に使っていきます。保存のショートカットは「Ctrl」＋「S」なので必ず覚えておきましょう。
マークアップのルール
- 開始タグ 「<」と「>」の間に「要素」を書く。
- 終了タグ「」の間に「要素」を書く。
例
<h1>一番重要な見出し</h1>
HTMLの基本形
- 「html」～「/html」 は、そのルールで記述するための「箱」
- 「head」～「/head」ブラウザに内容のルールを伝える（ブラウザでは不過視、コンピューターに向けた情報）
- 「body」～「/body」 閲覧者に内容の意味を伝える（ブラウザでは可視、人間に向けた情報）
<html> <head> </head> <body> </body> </html>
この時大事なのは上から順に書いて行くのではなく、構造と意味を理解し、各タグ毎に記述していきます。
タイトルを追加する
<html> <head> <title>はじめてのHTML入力練習</title> </head> <body> </body> </html>
今回覚えるタグ（要素）
- h1～h6 見出し（h1,h2,h3,h4…と、数が大きくなるほど見出しは小さくなります）
- 段落(文章)
- ul(unordered list) 順不同リスト
- ol(ordered list) 順序が決まっているリスト
- li リストタグ （ul もしくは ol と一緒に使います）
画像の挿入とリンク
画像を挿入されるには「img」タグを使用します。
<img src="画像の置いてある場所" alt="代替え文字">
img = image
src = source
ハイパーリンク
リンクの無いWebサイトはこの世界に存在しません。リンク＝webと言っても良いので、しっかりと理解し覚えておきましょう。
テキストリンク
<a href="移動先の住所（パス）">テキストリンク</a>
a：anchor
href：hyper reference
画像リンク
<a href="移動先の住所（パス）"><img src="画像の置いてある場所" alt="代替え文字"></a>
メールリンク
<a href="mailto:メールアドレス">お問い合わせ</a>
道具の使い方を覚える
PCの使い方
物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター（PC）は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。
今までのようにユーザーとしての使い方では無く、制作者としての使い方を覚えていきましょう。
ブラウザーの使い方
ブラウザーとは？
ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ（ブラウザー）と呼んだ場合、多くはウェブブラウザのことを指す。
授業ではFirefoxとGoogle Chromeの2つのブラウザーを主に使用していきます。
Mozilla Firefox
非営利団体である「Mozilla Foundation」が開発したブラウザー。
Web開発に適したアドオンと呼ばれる追加機能が豊富。最新のHTML5とCSS3による表示が可能。
Google Chrome
Googleが開発しているブラウザーでGoogleアカウントと同期する事で様々な拡張が可能。
世界的に見るとシェアNo1ブラウザー。最新のHTML5とCSS3による表示が可能。
Web制作におけるIE(Internet Explorer)
日本では長年ダントツのシェアを占めていたが、以前から不具合が多くweb制作者にとって悩みのタネでした。
最近は事情も変わって場合によってはIE未対応でOKの場合も出て来ています。
検索の仕方を覚える
検索の仕方を覚える、というのもサイト制作の習得の為に必要なスキルです。
「AND」検索
例（池袋 カフェ）
一番使われている方法で２つ以上のキーワードを入力して検索精度を上げることができます。
キーワード間に一文字分のスペース （半角、全角どちらでも可） を入れる。
「OR」検索
例（マイケル・ジャクソン OR Michael Jackson）
たとえばマイケル・ジャクソンを調べるときに日本語で「マイケル・ジャクソン」と表記したサイトと英語で「Michael Jackson」と表記した２種類があり場合に、そのどちらも検索結果に出したい場合などに使うのが「OR」検索です。
キーワードを半角大文字「OR」、もしくはパイプ「|」で区切り、その前後には半角スペースを入れます。
「マイナス」検索
「キーワード1」で検索したいが「キーワード2」の情報は除きたい場合、「-」の後ろに書いたキーワードを除外して検索することができます。
例：英会話 -教室
関連サイト検索
そのWebサイトと似たようなサイト（類似性の高いサイト）を見つけたい場合、related:を使ってみましょう。
同業種の競合サイトを見つけたい、類似サイトを探して参考にしたい時などに役立ちます。
例：related:http://toyota.jp/（※トヨタ自動車の公式HPです）
結果：日産、ホンダ、マツダ、スズキ等の公式HPがヒット
タイトル検索
タイトル名をキーワードで検索したい場合は「intitle:」「allintitle:」がおすすめです。 「intitle:」は単一のキーワードを、「allintitle:」は複数のキーワードを検索する時に使用します。
例：intitle:Web制作
結果：ページタイトルに「Web制作」を含むページがヒット
例：allintitle:Web制作 おすすめ
結果：ページタイトルに「Web制作」「おすすめ」を含むページがヒット
実際に検索をしてみましょう
- 3年前の今日の最高気温と最低気温
画像検索
- 写真の場所はどこでしょう
Chromeのデベロッパーツールを使う
Google Chromeのデベロッパーツールは、サイト制作において欠かせないツールです。
他のブラウザにも同様のツールはありますが、Chromeのものが最も使いやすいと感じる人が多いのではないでしょうか。
タイピングスキルを身に付ける
必ずしもブラインドタッチを習得しなければいけない訳では無いですが、早くタイピング出来ると沢山のメリットがあります。授業でも入力作業はもちろんあります。入力作業にストレスを感じてしまうと授業全体にストレスを感じてしまうので、まずは入力作業にストレスを感じなくなる程度に慣れましょう。
Webサイトを見る、知る、そして作る
Webサイトを見る
Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。
もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音楽を聞くように、サッカー選手を志している人がサッカーを見るように、web制作を志している人はとにかく色々なwebサイトを見ましょう。100個のサイトを見れば何か判る事があるはずです。
Webサイトを知る
ある程度Webサイトを見ていくと、それぞれのWebサイトの共通点や相違点が見えてきます。
例えば居酒屋サイトによく使われている色やフォント、不動産サイトでよく使われている色、ECサイトでよく使われている動き、などなど。
サイトを見る事で色々な事が解ります。
Webサイトが不特定多数の人に使ってもらう道具だとしたら、多くの人が持つ共通認識、ここでは「◯◯っぽさ」といった方が解りやすいかもしれませんが、その業種ごとの「◯◯っぽさ」を取り入れる事で使い易さがぐっと良くなります。
見る、の次のステップとして、色やレイアウト、なんでも良いので共通項を見つけてグループ化してみましょう。
既存のギャラリーサイトを使えば、それぞれのテーマに沿ったサイトを簡単に探す事が出来るので、積極的に活用しましょう。
良いと思ったサイトをまとめる
http://w007sw.wp.xdomain.jp/w007sw.wp.xdomain.jp
既存のサイトを真似して作る
一番最後の段階として、既存のサイトを真似して作ってみましょう。既存サイトの文章構造やレイアウトをトレースする事でそのサイトの設計思想や工夫しているポイントなどがより具体的に解ってきます。
なので、積極的に既存のサイトを真似しましょう。初学者にとってデザインとはとにかく良いサイトを真似る事です。
さらにポートフォリオの事を考えると、画像などは既存サイトのものをそのまま使うのではなく、自身でテーマを決めて、テーマに沿った内容に差し替えてみましょう。
