仙台就労移行支援|障害者サポートセンター|精神・身体・知的 

宮城県仙台市の就労移行支援、manaby二日町事業所|お問い合わせは→TEL 022-725-7224  mail  info@manabi-f.com

WEBデザイン必須、無料画像編集ソフト、はじめてのフォトスケープでランディングページを作る、仙台市の就労支援事業所で開催

f:id:tsukurusendai:20180216122859g:plain

 

 

はじめに

 

今回は「WEB・IT・PCで未来をきりひらく」をコンセプトにしている仙台市で就労移行支援のmanaby二日町事業所(H30/4 就労・自立支援 ひらくに変わります)のイベントで事業所長の塩崎がPhotoScape(フォトスケープ)のセミナーを開催致します。

 画像加工技術を身につけると「障害があっても」「引きこもり」でも自宅で働き、収入を得ることにつながると思います。

 目指せ在宅ワーク

 

WEBデザインとは?

WEBサイトとつくるときのポイントとして「見やすさ」使いやすさと担当する重要な役割をはたします。通常フォトショップイラストレーターを使用します。

フォトスケープでも結構いろいろできますのでチャレンジしてみてくだい。

 

f:id:tsukurusendai:20180215212840j:plain

PhotoScape(フォトスケープ)とは?

 

無料で使える画像編集ソフトです。

現在、当事業所のカリキュラムでAdobeのPhotoshop(フォトショップ)を教えていますが、月額980円の使用料がかかります。

年間契約なので途中解約は違約金もかか

メンバーさんからの声で自宅のPCでは費用がかかるのでPhotoshop(フォトショップ)使うの厳しいな・・・という意見をいただきました。

確かに、少し使うだけなのにお金がかかるなんて・・・

そこで今回は高機能画像加工ソフト、PhotoScape(フォトスケープ)を紹介して、素敵なランディングページやコンテンツを作るお手伝いができればと思います。

 

PhotoScape(フォトスケープ)でやりたい事

 

アイキャッチ画像に文字を挿入する

ペイントでは文字を打ち込むことができなく悩んでました。

かっこいいブログなどには画像に文中に関係ある文字が挿入しあって、何を説明するページかが視覚的に分かるので、嬉しです。

 

②動きのある画像

健康食品のサイトや広告をクリックした先のランディングページには、矢印がピコピコ動いたり、人が動いたりする画像を作りたい。

 

まずはPhotoScape(フォトスケープ)をダウンロードする

 

PhotoScape(フォトスケープ)はフリーソフトという形態で、ダウンロードするときに広告をクリックさせる仕掛けがたくさんあります。

その為、何度かクリックしてもダウンロードできなく、重いパソコンではなかなか進まないのでイライラします。

f:id:tsukurusendai:20180215202143j:plain

①フォトスケープと検索*カタカナでOK!

ここでフォトスケープのスペルテスト!

私は「フォトスカペ」と覚えてます(笑)

f:id:tsukurusendai:20180215202305j:plain

②クリック2回目

ここから罠がでてくるので間違えないで!

f:id:tsukurusendai:20180215202353j:plain

 ③はじめてだと、どこをクリックして良いか分からないですよね~

f:id:tsukurusendai:20180215202443j:plain

 ④クリック3回目、左はじです。

f:id:tsukurusendai:20180215202557j:plain

⑤クリック4回目、まだダウンロードできず・・・・

罠、「ここから開始」って、今までカタカナだったダウンロードが英語になって分かりづらくしてるぅ↓

f:id:tsukurusendai:20180215202825j:plain

⑥画面を下にいくとまた罠がっ!!!!

 

f:id:tsukurusendai:20180215203618j:plain

⑦5回目のクリックにしてやっとダウンロードが開始されました。

罠たくさんすぎっ!

f:id:tsukurusendai:20180215204123j:plain

⑧しかし良くある、あるある、

ダウンロードされたファイルどこにあるの?

下のフォルダーをクリックするとダウンロードの中にあります。

f:id:tsukurusendai:20180215204137j:plain

⑨チャックがついている圧縮ファイルになっているのでクリックして右クリック、3段目の「すべて展開」をクリック。いわゆる圧縮ファイルを解凍するってことです。

⑩しかしまだ迷いどころはあります。

ファイルを開くとたくさんファイルがあります。

その中の「アプリケーション」とクリック、英語でよくわかりませんが、ウィルスなどの危険はないです。ひたすら「next」をクリック。

最終的にはショートカットが作成されます。こんな感じに↓

f:id:tsukurusendai:20180215205028j:plain

そこで5回もクリックしたくない方はこちらから

f:id:tsukurusendai:20180215212126g:plain

 

画像に文字を入れる方法とは?

 

画像を用意する

①自分で撮影した写真

②WEB上から「無料 画像」で検索→ダウンロード

③PCの画面をキャプチャーする

 

今回はキーボード右上のPrint Screen(プリントスクリーン)略してPrtScと表記されています。

1回押してフォトスケープの「画像編集」→貼り付け

(ショートカットではCtrl+V)

f:id:tsukurusendai:20180216075233j:plain

画像編集は上でもアイコンでも良し、

f:id:tsukurusendai:20180216080027j:plain


オブジェクトをクリック

f:id:tsukurusendai:20180216075948j:plain

吹き出しをクリック

f:id:tsukurusendai:20180216080206j:plain

最後に右端で保存をします。

f:id:tsukurusendai:20180216080251j:plain

トップ画像が完成♪鳥がしゃべってるみたいでかわいいですね(笑)

 

動きのある画像の作り方とは?

GIF=ジフと読みます。グラフィック・インターチェンジ・フォーマット。

WEBページ製作時にボタンやアイコンなどに良く使われます。

ペラペラ漫画の要領で数枚の画像を順次に切り替える為動いているように見えます。

f:id:tsukurusendai:20180216122859g:plain

動きがあるのでアイキャッチ効果抜群です。

f:id:tsukurusendai:20180216123455j:plain

①GIFアニメから開きます。2か所どちらからでもOK!

f:id:tsukurusendai:20180216123557j:plain

②画像を追加もしくわドロップして挿入

f:id:tsukurusendai:20180216123645j:plain

時間をゆっくりにすると滑らかになります。

f:id:tsukurusendai:20180216123901g:plain

 

GIFアニメにリンクをつける

 

 

①<a class="http-image" href="飛ばしたいリンク先のURL"> っていうのと、</a>を

             ☟     

②GIFのソールコードの<imgの前に①を入れる

 

③最後</a>で閉じる

 

 

そうするとGIFアニメをクリックすると飛ばしたいページに飛ぶようになります。

f:id:tsukurusendai:20180215212126g:plain

 

 

まとめ

フォトスケープはフォトショップよりも直観的に操作でき使いやすいと思いました。

階層=レイヤーがないようで、先に表示したので下の階層になるようです。

まだまだいろいろな機能があります。

ほくろを消したり、化粧をしたり、かっこよいグラデーションの文字を作ったり。

分からな事は検索するといろいろてきますので調べてみましょう。

簡単ですのでお気軽に使用してみてください。