HP運営ブログ

2017年06月のブログアーカイブ

2017.06.26.初心者さんのためのミニWEB語録 *** デザインソフト ***

皆さん、こんにちは(≧ω≦)

中村@新人です。

 

制作をしていると、「フォトショ」「PSD」「イラレ」「ai」などがよく会話に出てきます。

 

「フォトショ」「PSD」は「Adobe Photoshop(フォトショップ)」というソフトとデータのことを。

「イラレ」「ai」は「Adobe Illustrator(イラストレーター)」というソフトとデータのことを言います。

 

どちらもアドビシステムズが販売しているソフトの事で、デザイナーさんなどの制作関連の方がよく使っています。

それぞれの特徴をちょっと紹介します☆

 

 

●Photoshop(フォトショップ)

点の集まりで作られたビットマップ画像を編集するソフト。

写真や素材を作ったり、画像全体の色味の調節、複雑なイラストなどの作成に向いています。

 

例えば、ボケてしまった写真を修復したり、暗い写真を明るくしたり、

細かい合成写真を作ることもできちゃいます。

沢山の色を使い、塗り重ねたようなイラストなどを作るときや、写真を基にして加工をするようなデザインやポスターの作成をするときはPhotoshopを使います。

 

なので、CGデザイナーさんやグラフィックデザイナーさん、WEBデザイナーさん、あとは写真家さんがよく使っています。

 

 

●Illustrator(イラストレーター)

ベジェ曲線を使って線と面で図形を描くベクター画像を扱うソフトです。

ベクター画像は画像を数値で記録している画像形式のため、拡大しても見た目が変わりません。

 

 

なので、細かい地図や写真をトレースして分かりやすい地図や図面を作ったり、印刷物のように大きなデータが必要になる場合、色々な部分に使うロゴマークやシンボルマーク、簡単なイラストはIllustratorを使うことが多いです。

 

 

用途が全然違うPhotoshopとIllustrator…どちらも機能がたくさんあって本当にいろんな事ができるソフトです。

プロのデザイナーさん達は二つのソフトを使い分けて必要なときに必要なソフトを使っているのですね。

 

 

 

***  (番外編) 似ている無料ソフト  ***

 

プロが使う有料ソフトはハードルが高い…という方、実はちょっと似ているソフトがあります。

 

●GIMP(ギンプ)

Photoshopに似ている画像編集ソフト。

無料なのに多機能で、写真の編集をしたり、沢山の色を使ったイラストを描ける便利なソフトです。

 

●Inkscape(インクスケープ)

Illustratorに似ているベクター画像編集ソフト。

こちらも無料なのに有用な機能がたくさんあり、ビットマップ画像へ変換することもできるので他のソフトとの連携が簡単なソフトです。

 

 

どちらも多機能で便利な無料ソフトですが、

色の形式の一つであるCMYKに対応していないため、印刷物用には向いていないという欠点があります。

 

印刷物用には使わないという方や、まずは試してみたいという方はこちらのソフトで練習してみるのも良いですね♪

 

 

 

2017.06.19.画像について <その2> PowerPointで画像作成

皆さん、こんにちは(≧ω≦)中村@新人です。

じつはGroopを試していたり、ブログを書いたり、

仕事をしていて中村@新人が一番困ったことがあるのです…

 

それは、「欲しい画像(写真・イラスト)がない!」 

 

ネット上にはたくさんの写真やイラストがありますが、

著作権の都合上使えないものや、有料のものなどがかなり多くて…

無料で使えるフリーの画像もいろいろあるのですが、

こういうのが欲しいなぁ…と、思ったものに限ってなかなか見つからないのですよ(´・ω・`)

 

そこで思いついたことが「ないなら作ったらいいじゃないか!

しかし、パソコンでイラストを作るなんてどうしたら…

と、悩んだ結果が――――

 

***  分かるソフト作ってしまえ!開き直りの画像作成!  ***

 

中村@新人が仕事で一番よく使うソフトは「Microsoft Office」のシリーズ。

使われている方の多いとてもメジャーなソフトだと思います。

 

これなら…と思い、早速「PowerPoint」を開いて図形ツールを確認しました(゜ω゜*)

 

試しに形が分かりやすいマウスの画像を作ってみたら、

意外と簡単にできたので、今も簡単な画像は「PowerPoint」で作ってます。

ちなみに、他の「Word」や「Excel」にも図形ツールがあるのでほぼ同じことができます。

 

今回はマウスを作った時の過程を紹介します。

「Microsoft Officeソフトでこんなこともできる」の一例としてご覧ください♪

 

 

パワーポイントでマウスの画像を作ってみよう☆

 

まずは、図形ツールから「円/楕円」を選択して程よい形の楕円を作ります。

 

図形の色をマウスっぽい灰色へ変更します。

 

 

次は、三方向矢印を選択してマウスの分かれ目を作ります。

 

 

矢印の頭をなくして、太さと色を調整します。

これだけでだいぶマウスっぽく見えてきました

 

正方形/長方形を選択してスクロール部分を作ります。

 

次は曲線コネクタを選択してマウスの線を作ってマウスが完成です♪

 

 

ちょっとはみでてしまったので、サイズ調整をするため、

全部の図形を選択してグループ化します。

 

サイズを小さくして、角度を調整して完成です

パーツを組み合わせるだけで簡単にマウスの画像ができちゃいました

 

 

この画像作成、先輩方はビックリしてました。

画像編集ソフトではなく「Office」シリーズを使うという発想がなかったそうです。

 

ちなみに中村@新人が書いたブログのイラストはこの作り方で作られた画像です。

思ったよりも色んなものが作れます。皆さんもいろいろお試しください♪ 

 

 

 

 

 

2017.06.12.初心者さんのためのミニWEB語録 *** 拡張子 <その2> ***

皆さん、こんにちは(*´ω`*)

中村@新人です。

 

今回は、前回のWEB語録に引き続き「拡張子」を紹介します!

 

***  よく見る拡張子  ***  

 

中村@新人のパソコンでぱっと作れるファイルの拡張子を集めてみました。

これだけでも結構数がありますよね( ゚Д゚)

 

なかでもパソコンを使う上でよく見る拡張子を一覧にしてみました。

 

拡張子名 説明
.doc/docx 「Microsoft Word」で作られたファイル。
よく使われるソフトなので必然的に見ることが多い拡張子です。
.xls/.xlsx 「Microsoft Excel」で作られたファイル。
よく使われるソフトなので必然的に見ることが多い拡張子です。
.ppt/.pptx 「Microsoft PowerPoint」で作られたファイル。
よく使われるソフトなので必然的に見ることが多い拡張子です。
.csv テキストやエクセルで作られるファイル。
詳しい説明はいづれまた…
.pdf 「Adobe Acrobat」で作られたファイル。
紙への印刷と同じ状態の画像を保存できます。
.txt テキスト文書形式のファイルです。
メモ帳などはデフォルトではこの形式で保存されます。
.html WEBページを形成するHTMLファイル。
ホームページを作成している時によく見る拡張子です。
.zip 以前紹介した圧縮ファイルの拡張子。
一番よく使われている圧縮形式です。
.png PNG(ピング)形式の画像ファイル。
イラストなどでよく見かける拡張子です。
.jpg/.jpeg JPEG(ジェイペグ)形式の画像ファイル。
写真はほとんどがこの形式ですね。
.gif GIF(ジフ)形式の画像ファイル。
アニメーションなどにも使える形式です。
.psd Photoshopで作られたファイル。
色々な制作の際によく見る拡張子です。
.ai Illustratorで作られたファイル。
色々な制作の際によく見る拡張子です。
.mp3 MP3形式の音声ファイル。
音声圧縮方式の一つです。
.wav Windowsで使われている標準の音声形式です。
圧縮される前の形式になります。

 

ファイルのやり取りをしていると、

「この形式じゃないと対応できない!」

なんてこともよくあります…(´・ω・`)

 

仕事をする上でよく使う、ワードやエクセルだけでも、ソフトのバージョンによって形式が変わったりするので、保存をする時に保存形式を確認して拡張子を見てみることをおすすめします(´∀`)ノ

 

 

 

今回はここまで! 次回のWEB語録は画像ソフトについて紹介します!

 

 

 

2017.06.05.画像について <その1> 画像編集は大切なのです

 

皆さん、こんにちは(*´ω`*)

中村@新人です。

 

今回は、ホームページ制作に欠かせない「画像」について、さわりの部分をお話しします。

 

 

***  写真や画像のサイズ調整や明るさ調整・編集は大切!  ***

 

ホームページ制作をする上で必ず必要になるのが画像の編集!

掲載する写真のサイズや色合い等を、

ちゃんとホームページのイメージと合わせないとそこだけ違和感が出てしまいます。

 

中村@新人がGroop用に編集した例がコチラ↓

 

 

もとの写真がちょっと暗かったので、色合いを明るくして文章を入れてみました!

 

ちなみに、なにも加工してないものと加工したものを入れた画像がコチラ↓

 

 

写真をそのまま掲載すると縦幅が大きいので、サイズも調整しました☆

 

 

もとのままより、編集した方がホームページに合ってますよね♪

ホームページのイメージを統一させるためにも画像の編集は大切なのです(≧ω≦)

 

 

画像編集には本当にたくさんの知識、色々な作業・ソフト、上手に編集するコツがいっぱいあります!

 

中村@新人は先輩方の知識と経験を教わりつつ、素人ならではの発想で画像を編集しています( ゚ω゚)

 

次回は先輩方にびっくりされた中村@新人の画像編集を紹介します♪

 

 

 

無料で今すぐ作ってみる

ブログ内検索

フィード

分からないこと、聞きたいことご相談頂ければわかりやすく・丁寧にお答えいたします。

PAGE TOP