Photoshop 基礎

Photoshop

Photoshopの基本的な使い方

Photoshopで行う作業は大きく別けると以下の３つ

 

  • 画像を作る。
  • 画像を補正する。
  • 画像を加工する。

 

・Photoshopの初期化
目的は、無駄に消費されているメモリの記憶をリセットすること。
アイコンをダブルクリック等で起動。
このとき［Ctrl］＋［Alt］＋［Shift］を押したままに。
Adobe Photoshop設定ファイルを削除しますか？」とダイアログがでる。

 

  • カラー設定は「Web・インターネット用 － 日本」
  • 環境設定で注意する所は「単位・定規」Webは必ずPixelに。
  • ヒストリーの数を増やすと便利だが、増やし過ぎるとメモリーが足りなくなる。

 

 

・選択範囲を取る

  • 選択ツール
  • 自動選択ツール
  • マグネット選択ツール

などで選択範囲を取る。
微調整はクイックマスクモードで作業する。




・画像間の移動
別のファイルに選択範囲を切り取って移動

  1. 「練習_1」→「sky.psd」と「ダッキー.psd」を開く。
  2. 「ダッキー.psd」の中から選択範囲を決める。
  3. 「選択ツール」で選択範囲を「tsky.psd」の画面の上に移動する。
  4. ダッキーちゃんをちょうど良い大きさに「自由変形」で変更する。




・ビネット効果



 

素材
https://yachin29.com/school/Web_Photoshop.zip

マークアップとは？

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>

相対パスと絶対パス

パスには相対パスと絶対パスの2つがあります。この2つの違いをしっかりと理解する事がWeb初学者とって1番大事な事です。

相対パス

ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述する方式。上位フォルダを「..」であらわす。
ひとつ上の階層を表すには「../」を使います。


絶対パス

絶対パスとは、http://から始まるアドレス（URL)を使ってファイルの場所を指定することです。この絶対パスは、おもに他のサイトにリンクしたりする場合に使います。

 

PCの使い方

まず最初にパソコンで覚える事はファイルとフォルダーの作成、及び使い方です。

  1. PCを使って働くのであれば、この記事の内容は必ず理解しなければいけない事です。とにかく読んで、意味の解らない箇所や語句を書き出してみましょう。
  2. 次に解らない箇所・語句をインターネットを使って調べてみましょう。「解らない事をインターネットを使って調べる」も必ず身に付けるべきスキルです。
  3. もちろんインターネットを使っても解らない事はあります。その場合は休み時間や授業後の自習時間などに講師や副講師に聞いてみましょう。

 




 

ファイル

ファイルとは画像や顧客の住所録といったデータの事で、そのソフト上でファイルを「保存」すると作成される。すでにあるファイルを開いて作業をして「保存」をすると、元あったファイルに上書き保存されるので、元のファイルも作ったファイルも両方保存したい場合は、「ファイル名」を変えて「保存」（別名保存）しなければならない。

ファイルの拡張子

ファイル名の最後のドット「.」から後ろの部分を拡張子と呼びます。例えば index.htm の拡張子は htm、cat.jpg の拡張子は jpg です。拡張子の種類によってそのファイルの種類が決まります。
PCによっては初期設定で拡張子を表示させないという設定になっているので、自宅のPCを確認してみましょう。

https://support.microsoft.com/ja-jp/help/978449



 

フォルダー

フォルダーとは、作成したデータをまとめておく箱です。ファイルが増えると目的のファイルを見つけるのに苦労する為、日付別や用途別にフォルダーに分けて管理します。データの管理はパソコンを使う上で最も基本であり、最も大切な事なのでしっかりと覚えましょう。


ファイルとフォルダのちがいって？

パソコンの中には、デジタルカメラで撮（と）った写真、暑中見舞い（みまい）のハガキや住所録など、いろいろなデータが入っているよね。これらのデータのまとまりひとつひとつのことを「ファイル」っていうよ。ファイルには、それぞれ名前を付けられるし、写真や書類などの種類もわかるから、必要なときに探（さが）して表示（ひょうじ）したり、印刷したりできるよ。

けれど、作ったファイルをどんどんパソコンの中に保存（ほぞん）して、数がふえてくると、使いたいファイルがどこにあるのか見つけにくくなるよね。そこで、ファイルを分類して保存（ほぞん）するための“入れ物”、「フォルダ」を使うんだ。

たとえば、部屋の床（ゆか）いっぱいにオモチャや教科書が散らかっていると、探し物（さがしもの）がすぐには見つからないことがあるよね。けれど、教科書をしまうのは机（つくえ）の引き出し、オモチャをしまうのはオモチャ箱、のように“入れ物”を決めておけば、あとからすぐに見つけられるね。

同じように、パソコンでファイルを作ったら、写真のフォルダ、書類のフォルダなどに分類して保存（ほぞん）しておくといいよ。こうすれば、必要なファイルをすぐに見つけて、開くことができるんだ。

azby.fmworld.net




ファイルの作成から移動、コピーまで、Windowsパソコンの超基本操作 - 価格.comマガジン


azby.fmworld.net



 

画像をダウンロードしてみる

 

Webサイトを見る、知る、そして作る

web基礎

Webサイトを見る

Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。
もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音楽を聞くように、サッカー選手を志している人がサッカーを見るように、web制作を志している人はとにかく色々なwebサイトを見ましょう。100個のサイトを見れば何か判る事があるはずです。

Webサイトを知る

ある程度Webサイトを見ていくと、それぞれのWebサイトの共通点や相違点が見えてきます。
例えば居酒屋サイトによく使われている色やフォント、不動産サイトでよく使われている色、ECサイトでよく使われている動き、などなど。
サイトを見る事で色々な事が解ります。
Webサイトが不特定多数の人に使ってもらう道具だとしたら、多くの人が持つ共通認識、ここでは「◯◯っぽさ」といった方が解りやすいかもしれませんが、その業種ごとの「◯◯っぽさ」を取り入れる事で使い易さがぐっと良くなります。
見る、の次のステップとして、色やレイアウト、なんでも良いので共通項を見つけてグループ化してみましょう。


既存のギャラリーサイトを使えば、それぞれのテーマに沿ったサイトを簡単に探す事が出来るので、積極的に活用しましょう。

stock.pulpxstyle.com



bm.s5-style.com


 

81-web.com


www.ikesai.com



muuuuu.org




アニメーションを使ったWEBサイト

http://www.teamgeek.co.za/www.teamgeek.co.za




 

動画を使ったWEBサイト

www.tenku-f.jp


co.hellolife.jp


couleecreative.com



 

良いと思ったサイトをまとめる

bntncayo05.starfree.jp


shibaco.wp.xdomain.jp





 

既存のサイトを真似して作る

一番最後の段階として、既存のサイトを真似して作ってみましょう。既存サイトの文章構造やレイアウトをトレースする事でそのサイトの設計思想や工夫しているポイントなどがより具体的に解ってきます。
なので、積極的に既存のサイトを真似しましょう。初学者にとってデザインとはとにかく良いサイトを真似る事です。
さらにポートフォリオの事を考えると、画像などは既存サイトのものをそのまま使うのではなく、自身でテーマを決めて、テーマに沿った内容に差し替えてみましょう。






stylebread.com


www.lumine.co.jp

 

生徒の作例

http://icecoffin.main.jp/mlog/pfs/kirin/



http://bntncayo05.starfree.jp/test06/



lumine | トレース

 

ブラウザーの使い方を覚える

web基礎

ブラウザーとは？

ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ（ブラウザー）と呼んだ場合、多くはウェブブラウザのことを指す。

授業ではFirefoxとGoogle Chromeの2つのブラウザーを主に使用していきます。

Mozilla Firefox

非営利団体である「Mozilla Foundation」が開発したブラウザー。
Web開発に適したアドオンと呼ばれる追加機能が豊富。最新のHTML5とCSS3による表示が可能。

www.mozilla.org


 

Google Chrome

Googleが開発しているブラウザーでGoogleアカウントと同期する事で様々な拡張が可能。
世界的に見るとシェアNo1ブラウザー。最新のHTML5とCSS3による表示が可能。

www.google.co.jp


 

Web制作におけるIE(Internet Explorer)

日本では長年ダントツのシェアを占めていたが、以前から不具合が多くweb制作者にとって悩みのタネでした。
最近は事情も変わって場合によってはIE未対応でOKの場合も出て来ています。


japanese.engadget.com

 

「2009年1月から2018年8月まで」デスクトップでのブラウザーのシェア推移


2019年1月現在の日本国内のブラウザーシェア


 

◆ 2019/01期の国内シェアランキング

1位 Chrome 58.46% 　2位 IE 15.19% 　3位 Firefox 9.47% 　4位 Safari 8.3% 　5位 Edge 6.69% 　6位 Opera 0.84% 　7位 Vivaldi 0.19% 　8位 QQ Browser 0.16% 　9位 Sleipnir 0.16% 　10位 その他 0.54% 　




gs.statcounter.com







 

検索の仕方を覚える

検索の仕方を覚える、というのもサイト制作の習得の為に必要なスキルです。

「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制作」「おすすめ」を含むページがヒット


画像検索
  • 写真の場所はどこでしょう

 

  • 写真の人物は誰でしょう



 

Chromeのデベロッパーツールを使う

Google Chromeのデベロッパーツールは、サイト制作において欠かせないツールです。
他のブラウザにも同様のツールはありますが、Chromeのものが最も使いやすいと感じる人が多いのではないでしょうか。


saruwakakun.com



 

Gメールアカウントを作る

Googleアカウントはweb制作者にとって、もはや必須の物といえます。
また授業内でのデータのやり取りなどでもGメールを使う事が多いので、必ず取得しておきましょう。

www.google.co.jp

www.google.com



 

タイピングスキルを身に付ける

必ずしもブラインドタッチを習得しなければいけない訳では無いですが、早くタイピング出来ると沢山のメリットがあります。授業でも入力作業はもちろんあります。入力作業にストレスを感じてしまうと授業全体にストレスを感じてしまうので、まずは入力作業にストレスを感じなくなる程度に慣れましょう。


www.code-drill.com