【第一回】photoshopを知ろう【空を変えよう】

  • 投稿日:
  • by
  • カテゴリ:

photoshop

という単語を聞いたことはありませんか?

実はこの単語はアドビという会社が販売している画像編集アプリケーションソフトウェアを指しています。

有料ではありますが

かなり有能な画像加工ソフト

です


有料でもいいから高性能なソフトで画像加工がしたい!
写真を本格的なソフトで緻密に色や位置を調整したい!

そんな方にはピッタリなソフトです。 

このソフトはアップデートのたびに使いやすく、また面白い機能を沢山使えるようになっています。

今回はそんな昨日の一部をご紹介させていただこうと思います。

例えばこの木の写真ですが

210318morning_00001_03.jpg

編集から"空を置き換え"をクリックして

photo1.jpg

Photoshop内に用意されている空を選びます!(夕暮れから曇り空まで多数用意されています)

photo2.jpg

空が変わりました!

昼の空からやや夕方にかけての時間帯の空になりました

photo3.jpg

通常の画像加工編集ソフトでは花以外の領域を選択し、消去するという手間がかかります。
Photoshopでは自動で空と花を区別し、選択しているので簡単にこのような編集をしてくれます。

Photoshopだからこそできることが実は沢山あります!
今後もPhotoshopについてお役に立てる情報をご紹介します!

知って楽する!スクリーンショット!

自分の画面を社内や社外の人に共有したい!でもやり方が分からない。

そんなお悩みを抱えている方はいませんか?

スマホやパソコンで自分の見ている画面を画像ファイルとして撮影したものを

スクリーンショット

といいます。

保存方法を覚えてコミュニケーションを円滑に行いましょう!

※本記事はwindows10の場合の紹介です。Macや別のバージョンの場合、またはノートパソコンの際は異なる可能性があります。


( + は一緒に押す動作を指します)

希望操作 キーボード
スクリーンショット(全画面)を撮影 PrintScreen
スクリーンショット(指定した範囲)を撮影 Windows+ Shift+ S
スクリーンショット(全画面)を撮影+保存 Windows PrintScreen

※スクリーンショット(全画面)を撮影/スクリーンショット(指定した範囲)を撮影した場合、押しただけでは"画像として保存"した状態にはなりません。


スクリーンショット(全画面)を撮影

PrintScreenキー   を押すことでデスクトップ全体のスクリーンショットが撮影され、クリップボードに保存されます。

クリップボードとはテキストや画像をコピー(もしくは切り取り)をすると、一時的に保存される場所のことです。
クリップボードは一時的な保存のみですので次にコピーをした際に前のコピーしたデータは消えます。

①ペイントを開きます

gimp42.jpg

②ホーム>貼り付け>貼り付け、もしくはCtrl+Vで貼り付けをします

gimp43.jpg

③ファイル>名前を付けて保存

スクリーンショット(指定した範囲)を撮影

Windowsキーと Shiftキーと Sキー  を一緒に押すことで指定した範囲のスクリーンショットが撮影され、クリップボードに保存されます。

※クリップボードとはテキストや画像をコピー(もしくは切り取り)をすると、一時的に保存される場所のことです。
クリップボードは一時的な保存のみですので次にコピーをした際に前のコピーしたデータは消えます。

①Windows+ Shift+ S を押します

gimp46.jpg

画面上中央にツールが表示されるので一番左(初期状態)を選択します

左から、四角形(初期状態)、フリーフォーム、ウィンドウ、全画面、中止 です。

画面全体が薄暗い色になります

②カーソルをドラッグしてスクリーンショットを撮影したい箇所を選びます

gimp47.jpg

選んだ部分が白くなります

③画面右下に表示が出るのでクリックします

gimp48.jpg

④切り取り&スケッチという画面が表示されます。右上の保存のマークを押しましょう。

gimp49.jpg

保存先を選択し、名前を付けて保存しましょう。

また、カーソルをドラッグしてスクリーンショットを撮影したい箇所を選んだ後にペイントを開き、貼り付け>保存を

することもできます。

スクリーンショット(全画面)を撮影+保存

Windowsキーと PrintScreenキー を一緒に押すことでデスクトップ全体のスクリーンショットが保存されます

エクスプローラー>PC>ピクチャと開いていくと「スクリーンショット」というフォルダに撮影した

画像が保存されています。

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

Q,スマホ( Android,iPhone)の場合は?

スマホ( Android,iPhone)でもスクリーンショットは可能です!

しかし機種により撮影方法が違うため、本記事では説明は省略させていただきます。

気になる方は、お持ちの機種名と「スクリーンショット」という単語で検索をかけてみましょう。

≡≡≡ヘ(*--)ノ<調べてみよう!

Q他のショートカットキーが知りたいけれど便利なものはありますか?

覚えて実践!ショートカットキー!

他、便利なショートカットキーについてはこちらの記事をどうぞ☝

★画像編集をしよう ~レイヤー編~

  • 投稿日:
  • by
  • カテゴリ:

画像を編集していると、よく出てくる言葉「レイヤー」

意味を知ればもっと理解が深まります。今回もGIMPというソフトを使用してレイヤーについて学んでいきましょう。

「レイヤー」ってなんだろう?

その疑問にお答えします。

レイヤーは透明な下敷きのようなもの

なんです!

gimp33.jpg

たとえばこの上の画像は

gimp31.jpg

3枚のレイヤーで構成されています。

透明な下敷きにそれぞれ絵や文字が載っていて、透明な部分(絵や文字がない部分)は下にあるレイヤーが映っているのです。


透明な下敷き=レイヤーを一枚一枚重ねることで新しく一つの画像ができます。

レイヤーを分ける必要はあるの?

なぜレイヤーを分けるかというと"編集がしやすい"からです。

例えば

◆背景の色だけを変えたい時→背景のレイヤーの色を変えましょう

gimp39.jpggimp40.jpg

◆レイヤーの順番を変えたい時→レイヤーを長押しして入れたい位置までドラッグしましょう

gimp32.jpg gimp38.jpg

"今日の運勢"という文字レイヤーをイラストレイヤーの下に配置したことで、文字がイラストの下に隠れました。

透明な部分ってどうやって見分けるの?

透明な箇所は白とグレーの市松模様で表示されます。

gimp41.jpg

画像編集する際はものによってはレイヤーを細かく分けることで作業しやすくなります!

ぜひトライしてみましょう!

おすすめイラスト素材サイト5選【2021年】

  • 投稿日:
  • by
  • カテゴリ:

こんにちは。

アイ・リンク・コンサルタントスタッフブログ担当です。

「素敵なバナーや資料を作りたい....」
「でもイラストを描くセンスも時間もない.......」

やる気があるけどそんな理由であきらめてしまっている方、いませんか?

今インターネットには利用規約範囲内であれば使用可能なイラスト素材サイトが多数存在します!

ルールを守って正しく使用すればプロのイラストをあなたも使うことができます!

おすすめイラスト素材サイトを5つ、選ばせていただきました!

よかったら参考にしてみてくださいね。

イラストAC

gimp25.jpg

https://www.ac-illust.com/

会員登録後、イラストのダウンロードが可能になる。
多数のイラストレーターが登録しているためイラスト数が豊富


いらすとや

gimp26.jpg

https://www.irasutoya.com/

とても有名。
様々なシーンのイラストが用意されており、絵柄も統一されているので使いやすい。


いらすとん

gimp27.jpg

http://www.irasuton.com/

ゆるっとした水彩風イラスト素材サイト
こちらのサイトも絵柄も統一されているので使いやすい。


EC design

gimp28.jpg

http://design-ec.com/

ネットショップで販売する際、もしくはSNSやHPで商品の宣伝用のバナー制作に困ったときにお勧め!
季節に合わせたバナーのセットやアイコンがあります。


FLAT ICON DESIGN

gimp29.jpg

http://flat-icon-design.com/

SNSで可愛いイラストアイコンが欲しいけど自分では描けない...
そんなお悩みを持つ方におすすめのサイト。
動物から日用品まで様々な種類のアイコンが用意されてます。


★サイトにより、利用規約が違います。
(同じサイト内であっても画像により制限があるケースもあります)

利用規約をよく読み、上手に活用しましょう!

2021.03.31

  • 投稿日:
  • by

こんにちは。

こちらは有限会社アイ・リンク・コンサルタントのスタッフによるブログになります。

3月も終わりが近づき、暖かい日が続いています。

春が楽しみですね

゜+.――゜゜+.――゜゜+.――゜゜+.――゜゜+.――゜゜+.――゜

cewpqCzuRhjoohyWMn5x1616986365-1616990436.gif

覚えて実践!ショートカットキー!

  • 投稿日:
  • by
  • カテゴリ:

こんにちは。

アイ・リンク・コンサルタントスタッフブログ担当です。

今回の記事はこちら。

※windows10の場合の紹介です。macや別のバージョンの場合異なる可能性があります。

ショートカットキーってなに?

ショートカットキーとはキーボードからパソコンの操作を簡単に行う機能を指します。

例えば、文字をコピー&ペーストする際にマウスを右クリックして「コピーと貼り付け...」
なんて方も多いのではないでしょうか?

勿論そういった方法も間違いではありません。
しかしショートカットキーを覚えれば、効率が上がり作業をスピーディーに行えます。
まずは実践してみましょう!

基本ショートカットキー      ( + は一緒に押す動作を指します)

希望操作 キーボード
前の操作へ戻す Ctrl+ Z
戻した操作をやり直す Ctrl+ Y
全ての項目を選択 Ctrl+ A
コピー Ctrl+ C
貼り付け Ctrl+ V
切り取り Ctrl+ X
複数の項目を選択 Shift+ ↑↓←→
ファイルを保存する Ctrl+ S
ファイルを開く Ctrl+ O
ファイルを印刷 Ctrl+ P

その他             (  は一緒に押す動作を指します)  

希望操作 キーボード
タスクマネージャーの起動 Ctrl+ Shift +Esc

୨୧┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈୨୧

例えばコピーするには選択後にCtrlキーとCキーを一緒に押すだけで簡単にできます!

ショートカットキーは上記で紹介した以外にもたくさん種類があります。

今回は基礎的な操作を紹介させていただきました!

バナーができるまで

  • 投稿日:
  • by
  • カテゴリ:

こんにちは。

アイ・リンク・コンサルタントスタッフブログ担当です。

アイ・リンク・コンサルタントスタッフブログのバナーを手描きにしようと考え、
決定するまでの流れをまとめてみました。 

サイズを2種類用意しているのは拡大縮小した際の印象が変わるためです。

試作1回目

バナー完成.jpg

バナー完成.jpg

草原を細かく描写したため、画像を縮小するとゴチャッとした雰囲気になってしまいました。
画像を小さくした際に"つむぐnote"の文字が見辛い気がします。

試作2回目

名称未設定-3.jpg

名称未設定-3.jpg

試作一回目の反省から文字を大きくしました。
しかし文字を大きくした分、イラストと被ってしまいました。


ただし、イラストについては単純化したので1回目より見やすくなった気がします。

試作3回目

blog3.png

blog3.png

原画(イラスト)を描き足して、水の空間を広く+動物のいる地面を前面に出しました。
文字も見やすく、また遠近感が出たと思います。
そしてイラストの猫が羊に変わりました。

^^^^^^^^^^^^^^^^^^^^^^^

猫の絵も好きで勿体なかったのでこのブログ記事にて出させていただきましたが
いかがでしたでしょうか?

今回はバナーについてでした!

★画像編集をしよう ~画像サイズ調整編~

  • 投稿日:
  • by
  • カテゴリ:

こんにちは。

アイ・リンク・コンサルタントスタッフブログ担当です。

今回の記事はこちら。

ブログで目を引くものはやはり、写真とコメントです。

でも一眼やスマホで撮った写真をブログに載せてみたけれど、なんだか微妙に見えてしまう......。

その原因は画像サイズのせいかもしれません。

そんな方は画像の大きさを変更してみましょう。

  目次 ~ 

  画像サイズの確認方法

  GIMPをダウンロード

  実際にサイズを変えてみよう

  簡単!トリミング方法!

  まとめ

20201151Baumkuchen.JPG

こちらはスタッフが撮影した写真です。

画像サイズの確認方法

デスクトップに画像を保存したのでパソコンで画像のサイズを確認してみましょう。

aaa.jpg

アイコンの上で右クリック→プロパディ→詳細を開きます。

kaisetsu2.jpg

詳細→イメージという欄を見てみましょう。
ここに表示されている大きさ、幅、高さがこの画像のサイズということになります。
すこぶるCMSのブログにアップする際は幅600ピクセルが適切なのでこのままではサイズが
大きすぎてしまいます。

GIMPをダウンロード

GIMPとは...画像加工ソフトです。無料かつ多機能な性能を持つソフトなので今回はこちらを使用します。

gimp_gimp.png

実際にサイズを変えてみよう

①画像データの場所を確認しましょう

②GIMPを開きます

gimp2.png

③ファイル→開く/インポートから①で確認した画像を探し、開きます

gimp3.jpg

④画像が開いたら、画像→画像の拡大縮小を開きます

gimp4.jpg

⑤画像の拡大・縮小という画面が開きます

gimp5.jpg

すこぶるCMSのブログにアップする大きさに合わせたい方は、
単位をpx、横幅の数値を600にし、エンターキーを押します。

拡大縮小(S)ボタンを押します。→画像赤四角参照

初期設定では縦横比が固定されているため、縦のサイズも自動で変更します。
(数値の横にある鎖マークは縦横比を固定するものです。比率を変更しない場合は解除しないように気を付けましょう)  →画像青四角参照

⑥画像の保存をします
ファイル→名前を付けてエクスポートを開きます。

gimp6.jpg


画像を保存したいファルダを指定します。
サイズ変更前の画像とは別に保存したい場合は名前を変更しましょう。
上書きしてもよい場合はそのままエクスポートを押します。

gimp7.jpg

別画面が表示されるのでもう一度エクスポートを押します。

gimp8kai.jpg

一連の作業で、指定した場所へサイズ変更された画像が保存されます。

簡単!トリミング方法!

画像のサイズ変更は完璧!という方にお勧めしたいのが"トリミング"です。

写真の一部だけ欲しい!もしくはその一部を、アイコンやバナーにしたい!という方に必見。

画像の中から自分が選択した部分を四角に切り抜くテクニックです。

①画面右から切り抜きツール(四角いマーク)を選択すると、画面左に切り抜きの設定バーが出ます。

今回はアイコンにしたいので固定にチェックを入れ、比率を1:1にします。
(長方形など自由な大きさの四角で切り取りたい場合は固定からチェックを外しましょう)

gimp9.jpg

②選択したい画像内で左クリックをしながらドラッグしてみましょう。

gimp10.jpg

画面内に角に□のついた四角形が表示されました。
この画面が明るいところが切り抜きしたい範囲、暗いところが削除される範囲になります。

ちなみにこの角に□のついた四角形の中心辺りを左クリックをしながらドラッグすれば指定したい範囲を移動することができます。

③範囲が決まったらエンターキーを押します。

20201152Baumkuchen.JPG

完成です!

切り抜きが完成したら、サイズを用途に合わせて変更し使い分けることも可能です。

例えば飼っているペットの写真などをSNSのアイコンにしたい方などはこのトリミングを実践してもよいかもしれません ฅ/ᐠ。ᆽ。ᐟ \

まとめ

さて、画像サイズの編集方法についてでしたが皆さんいかがでしたでしょうか。

一手間かけることで写真はさらに魅力的になる可能性を秘めています。
画像加工を知り、インターネットを上手に活用しましょう!

★画像編集をしよう ~文字入れ編~

  • 投稿日:
  • by
  • カテゴリ:

こんにちは。

アイリンクスタッフブログ担当です。

例えば通販サイトで画像に「特別価格○○円」「限定品」と書かれたものを見たことは
ありませんか?

文字が入ることで商品の説明が分かりやすくなることはもちろん、思い出の写真に文字を入れてみるのもいいですね。
文字入れをマスターすれば様々な場面で応用できます!気になる方はまずこの記事を読んでチャレンジしてみましょう。

  ~目次 ~ 

  GIMPをダウンロード

  文字を入れてみよう

  文字で遊ぼう 1⃣文字の色を変えよう

         2⃣文字の簡単編集

         3⃣フォントと文字の幅

  まとめ

GIMPをダウンロード

 GIMPとは...画像加工ソフトです。無料かつ多機能な性能を持つソフトなので今回はこちらを使用します。

gimp_gimp.png

文字を入れてみよう

①画像データの場所を確認しましょう

②GIMPを開きます

gimp2.png

③ファイル→開く/インポートから①で確認した画像を探し、開きます

gimp3.jpg


③テキストアイコンをクリック→文字を入力したい場所で左クリックすると以下の画面になります。

gimp11.jpg

早速用意した文字を打ってみましょう。

gimp12.jpg

文字がはいりました!!


ちなみに文字を入れることで自動でテキストレイヤーが追加されます。

gimp19.jpg

画像とは別のレイヤーになっているのが分かります。


文字で遊ぼう

  

1⃣文字の色を変えよう

テキストバー右に色と書かれた欄があるのでクリックすると文字色というウィンドウが表示されるので好きな色を選びましょう。色が決まったらOKを押します。

gimp16.jpggimp17.jpg

作業はこれだけです!

:*++*:..*::*++*:..*:

2⃣文字の簡単編集

GIMPには誰でも簡単に文字に変化をつけられるためのボタンがあります。

xxx.jpg左から、太字、斜体、下線、取り消し ...の機能ボタンになります。

 

          (上左:太字 上右:斜体 下左:下線 下右:取り消し線) gimp14.jpg

             

比較すると分かりますが、印象が変わります!

3⃣フォントと文字の幅

フォントとは文字の種類です。ゴシック体や明朝体という言葉を聞いたことはありませんか?
文字にもデザインがあり、選ぶフォントによって文字の雰囲気は大きく変わるので色々と試してみてください。

 フォント

gimp18.jpg

テキストの欄にフォント、サイズという表示があります。

" Aa " と書かれたアイコンをクリックすると様々なフォントの種類が出てきます。
(" Aa " と書かれたアイコンにマウスポインタをのせて、マウスホイールを回してみましょう。フォントが入れ替わりますのでその中で自分が好きなフォントを見つけることができます)

 フォントサイズ

先ほどのフォントの下にサイズという表記があります。

直接数字を打ち込んで変更してみましょう。
数字が大きくなればフォントサイズも大きく、数字が小さければファンとサイズも小さくなります。
(数字が表示されている場所にマウスポインタをのせて、マウスホイールを回してみましょう。
フォントサイズが入れ替わりますのでその中で自分が好きなサイズを見つけることができます)

 文字の幅

vvv.jpg  このアイコンは幅を変更するものになります。

★上...インデント。1行目と改行した文章の字下げ幅を変更できます

gimp21.jpg

★中...行間隔。行と行の間隔を変更できます

gimp22.jpg

★下...文字間隔。文字と文字の間隔を変更できます

gimp23.jpg

 文字の揃え位置

aa.jpg このアイコンは文字列の位置を変更するものです。

左...左揃え

中左...右揃え

中右...中央揃え

右...両端揃え

gimp20.jpg


まとめ

20201156Baumkuchen.JPG

スタッフも文字編集にチャレンジしてみました。
そして完成です!
文字を入れることで自然と目を惹く仕上がりになりました。

GIMPに最初から用意されている、 

Yu Mincho Light
Yu Gothic Bold

というフォントを使用してみました。
フリーフォントなどをダウンロードして、使ってみるのもいいですね。

さて、画像サイズの編集についてでしたが皆さんいかがでしたでしょうか。
文字の編集を利用すれば、

naruhodo3.jpg

ブログ中に解説を入れてみたり、

bana-re11.png

バナーに活用することもできます!

今回は文字入れの基礎的な部分についてご紹介しました。
文字入れの活用方法は無限大です。ぜひアッと目を引くデザインを楽しみましょう!

よろしくお願いいたします

  • 投稿日:
  • by

こんにちは。

こちらは有限会社アイ・リンク・コンサルタントのスタッフによるブログになります。

皆様のお役に立てる情報を更新できればと思います。

何卒よろしくお願いいたします。

EnagOygybpY7N0WCaIcA1616117801-1616118531.gif