- はじめに
- WEBデザインとは？
- ＰｈｏｔｏＳｃａｐｅ（フォトスケープ）とは？
- ＰｈｏｔｏＳｃａｐｅ（フォトスケープ）でやりたい事
- まずはＰｈｏｔｏＳｃａｐｅ（フォトスケープ）をダウンロードする
- 画像に文字を入れる方法とは？
- 動きのある画像の作り方とは？
- ＧＩＦアニメにリンクをつける
はじめに
今回は「ＷＥＢ・ＩＴ・ＰＣで未来をきりひらく」をコンセプトにしている仙台市で就労移行支援のmanaby二日町事業所（Ｈ30/4 就労・自立支援 ひらくに変わります）のイベントで事業所長の塩崎がＰｈｏｔｏＳｃａｐｅ（フォトスケープ）のセミナーを開催致します。
画像加工技術を身につけると「障害があっても」「引きこもり」でも自宅で働き、収入を得ることにつながると思います。
目指せ在宅ワーク！
WEBデザインとは？
WEBサイトとつくるときのポイントとして「見やすさ」使いやすさと担当する重要な役割をはたします。通常フォトショップやイラストレーターを使用します。
フォトスケープでも結構いろいろできますのでチャレンジしてみてくだい。
ＰｈｏｔｏＳｃａｐｅ（フォトスケープ）とは？
無料で使える画像編集ソフトです。
現在、当事業所のカリキュラムでＡｄｏｂｅのＰｈｏｔｏｓｈｏｐ（フォトショップ）を教えていますが、月額980円の使用料がかかります。
年間契約なので途中解約は違約金もかか
メンバーさんからの声で自宅のＰＣでは費用がかかるのでＰｈｏｔｏｓｈｏｐ（フォトショップ）使うの厳しいな・・・という意見をいただきました。
確かに、少し使うだけなのにお金がかかるなんて・・・
そこで今回は高機能画像加工ソフト、ＰｈｏｔｏＳｃａｐｅ（フォトスケープ）を紹介して、素敵なランディングページやコンテンツを作るお手伝いができればと思います。
ＰｈｏｔｏＳｃａｐｅ（フォトスケープ）でやりたい事
①アイキャッチ画像に文字を挿入する
ペイントでは文字を打ち込むことができなく悩んでました。
かっこいいブログなどには画像に文中に関係ある文字が挿入しあって、何を説明するページかが視覚的に分かるので、嬉しです。
②動きのある画像
健康食品のサイトや広告をクリックした先のランディングページには、矢印がピコピコ動いたり、人が動いたりする画像を作りたい。
まずはＰｈｏｔｏＳｃａｐｅ（フォトスケープ）をダウンロードする
ＰｈｏｔｏＳｃａｐｅ（フォトスケープ）はフリーソフトという形態で、ダウンロードするときに広告をクリックさせる仕掛けがたくさんあります。
その為、何度かクリックしてもダウンロードできなく、重いパソコンではなかなか進まないのでイライラします。
①フォトスケープと検索＊カタカナでＯＫ！
ここでフォトスケープのスペルテスト！
私は「フォトスカペ」と覚えてます（笑）
②クリック2回目
ここから罠がでてくるので間違えないで！
③はじめてだと、どこをクリックして良いか分からないですよね～
④クリック3回目、左はじです。
⑤クリック4回目、まだダウンロードできず・・・・
罠、「ここから開始」って、今までカタカナだったダウンロードが英語になって分かりづらくしてるぅ↓
⑥画面を下にいくとまた罠がっ！！！！
⑦5回目のクリックにしてやっとダウンロードが開始されました。
罠たくさんすぎっ！
⑧しかし良くある、あるある、
ダウンロードされたファイルどこにあるの？
下のフォルダーをクリックするとダウンロードの中にあります。
⑨チャックがついている圧縮ファイルになっているのでクリックして右クリック、3段目の「すべて展開」をクリック。いわゆる圧縮ファイルを解凍するってことです。
⑩しかしまだ迷いどころはあります。
ファイルを開くとたくさんファイルがあります。
その中の「アプリケーション」とクリック、英語でよくわかりませんが、ウィルスなどの危険はないです。ひたすら「next」をクリック。
最終的にはショートカットが作成されます。こんな感じに↓
そこで5回もクリックしたくない方はこちらから
画像に文字を入れる方法とは？
画像を用意する
①自分で撮影した写真
②ＷＥＢ上から「無料 画像」で検索→ダウンロード
③ＰＣの画面をキャプチャーする
今回はキーボード右上のＰｒｉｎｔ Ｓｃｒｅｅｎ（プリントスクリーン）略してＰｒｔＳｃと表記されています。
1回押してフォトスケープの「画像編集」→貼り付け
（ショートカットではＣｔｒｌ＋Ｖ）
画像編集は上でもアイコンでも良し、
オブジェクトをクリック
吹き出しをクリック
最後に右端で保存をします。
トップ画像が完成♪鳥がしゃべってるみたいでかわいいですね（笑）
動きのある画像の作り方とは？
ＧＩＦ＝ジフと読みます。グラフィック・インターチェンジ・フォーマット。
ＷＥＢページ製作時にボタンやアイコンなどに良く使われます。
ペラペラ漫画の要領で数枚の画像を順次に切り替える為動いているように見えます。
動きがあるのでアイキャッチ効果抜群です。
①GIFアニメから開きます。2か所どちらからでもOK！
②画像を追加もしくわドロップして挿入
時間をゆっくりにすると滑らかになります。
ＧＩＦアニメにリンクをつける
①<a class="http-image" href="飛ばしたいリンク先のURL"> っていうのと、</a>を
☟
②GIFのソールコードの＜imgの前に①を入れる
③最後</a>で閉じる
そうするとGIFアニメをクリックすると飛ばしたいページに飛ぶようになります。
まとめ
フォトスケープはフォトショップよりも直観的に操作でき使いやすいと思いました。
階層＝レイヤーがないようで、先に表示したので下の階層になるようです。
まだまだいろいろな機能があります。
ほくろを消したり、化粧をしたり、かっこよいグラデーションの文字を作ったり。
分からな事は検索するといろいろてきますので調べてみましょう。
簡単ですのでお気軽に使用してみてください。