最近ではレスポンシブデザインが主流になってきたのでTOP画像の作成頻度は少なくなってきましたが、以前このサイトで使用していたTOP画像の作成方法の説明をしていきたいと思います。トップ画像に限らず画像の編集作業を覚えておくと、ホームページを作成していく際にバナー広告なども作ることが出来るようになるので色々と役立つことが多いかと思います。無料の画像編集ソフトでトップ画像を作成してみる実際に無料で使えるソフト(フリーソフト)を使ってトップ画像を作っていきたいと思います。コチラの画像が以前このサイトのTOP画像として使用していたモノです。ホームページの作成を始めたばかりの頃に作成したトップ画像なので全くセンスを感じられないトップ画像ですが、これでも一生懸命に作成した記憶がございます・・・しかし今現在はサイト自体をレスポンシブデザインに変更したのでこのセンスの無いトップ画像は使用しておりませんが、ホームページを自分で作成されるならこれら画像の編集方法は覚えといて損はないかと思います。それでは早速無料で使える画像編集ソフトを使って画像の編集をしていきましょう。ここで画像の編集に使う無料のソフトは「インクスケープ」と「JTrim」というフリーソフトです。それでは、以前このサイトで使用していたTOP画像の作成手順の説明をさせていただきます。メインとなる画像を編集してみるまずは画像のメインとなる写真(イラストでも無地で構いませんが)を使いやすいように少し加工してみます。この加工作業は主に大きな画像の1部分だけ使いたい時などする作業となります。実際にTOP画像で使用したPC作業している手元の画像(赤枠で囲っている部分)は、このような画像のある一部分を使用しております。使用した画像のサイズが非常に大きい(元のサイズは5000×3000でした)ので画像データを縮小し、今度は画像の使いたい部分をトリミング(切り取り)し調度良い画像サイズに加工しますこの時使用した画像のサイズを縮小をするソフトは「JTrim」というフリーソフトを使用して行っております。「JTrim」は簡単に画像などを縮小したりできるフリーソフトなので、今後自分でホームページの作成をしようとされている方はインストールしといた方が宜しいかと思いますよ。ホームページ作成時にあったら便利な無料の画像編ソフトなどはこちらをご覧ください関連記事ホームページ作成時に役に立つ画像編集ソフトフリーソフトを使って画像を縮小してみる実際に「JTrim」を使って画像を縮小してみます。「JTrim」を起動し加工したい画像を選択します。選択するとこの様な画面になりますまずは画像の縮小の方法ですこの画像サイズは5000×3400だったので、横サイズを1000に変更します。横と縦を同時に変更すると縦横の比率が変になる場合があるので、使い慣れるまでは横サイズだけサイズ変更をしてあげるのがよいと思います。step1左上のリサイズボタンを選択します。step2縦横のサイズを指定しますstep3あとはOKボタンを押すだけで画像の縮小作業は終わりです。フリーソフトで画像のトリミング(切り抜き)今度は、この画像の使いたい部分の切り抜きをしていきます。使いたい部分を選択(マウスの左ボタンを押しながら使いたい部分をドラッグ)します左上の切り抜きをクリックします。これで、左図のように使いたい部分が切り抜かれました。メインの画像の編集はこれで一旦終了です。あとでこの画像は使うので自分の分かる場所に名前を付けて保存しましょう。次は切り抜いた画像に文字を入れたりグラデーションをかけたりしていきます。この画像に文字やグラデーションを掛けたりする際にしようするソフトは「インクスケープ」というフリーソフトです。それでは実際に「インクスケープ」を使って編集作業に進みたいと思います。スポンサーリンク無料の画像編集ソフト「インクスケープ」を使って画像の編集を行う右上のスパナみたいなボタンを選択するとプロパティの編集画面になります。ここで画像の大きさや縦や横といった設定も出来ます。次に画像のサイズを決めるのですが、いつも私はTOP画像を作る時は大体1200×150前後で設定しています。このあたりは調度良いサイズをご自身で探してみてください。※本当は正確なサイズを設定した方がよいのですが、私は知らないので大体このくらいの画像サイズにします・・・これでベースとなる画像の下地が出来ました。インクスケープに画像を取り込む次は先ほど加工した画像(手順1で加工した画像)を取り込んでいきます。左上のファイル→インポートを選択します。先ほど加工した画像を選んで画像の埋め込みを選択します。取り込んだ画像を先ほどの下地に合わせて縮小しましょう。取り込んだ画像の四隅にに矢印が出ているのでこれを斜め方向にずらすと縮小出来ます。この時、出来あがっている画像を見ると分かりますが写真は左よりになっていると思います。真中ではないかは後で分かると思うので取りあえず左寄りに画像を配置します。次は左側の四角を作るアイコンを選択し右側の空いている箇所に長方形を作ります。この長方形の部分に文字を入れていきます。先ほど画像は左寄りに配置したのは、右側に文字を入れるためです。画像の上でも文字を入れる事は出来ますが、あまり画像の上に文字を入れると読みづらい文字になる恐れがあるので、初めのうちは文字下は画像無しの方が良いと思います。画像編集など慣れてきてから色々試してみてください。スポンサーリンクグラデーションで画像の境目を消してしまえこのままですと、画像と長方形の境目がはっきりし過ぎて見栄えが悪いので境目が分からない様に加工していきます。下から3番目のグリーンのアイコン(画像にグラデーションを掛けてくれる)を選択し、先ほどの画像の2枚とも重なり合っている部分から少し左側にずらして選択したまま左側にドラックします(マウスの左ボタンを押したまま左に移動)すると先ほどの境目が分からない様にグラデーションが掛かります。この時画像が重なり合っていない部分からグラデーションを掛けると画像と画像の境目が分かってしまいます。試しながらいじると分かるようになるので少しづつ焦らず作って行きましょう。次は画像に文字を入れていきたいと思います。画像だけでは物足りないのでテキストを挿入してみるそれでは今度は先ほど編集した画像にあなたのホームページの題名(会社名や紹介文を入れてパッと見たときに何のホームページか分かるようにしましょう)を入れていきます。文字の挿入ボタンは左側のメニューバーの『A』と書かれたアイコンです。『A』のアイコンをクリックすると文字を書く事が出来ます。文字のフォントや文字サイズを変更したい時は上のメニューバーの『T』。文字の色を変えたい時は画面の下側にある色を選択すると色が変わります。文字の位置などを変更したい時は文字を選択しドラックしてあげると簡単に位置を変更できるので読みやすい位置に変更して下さい。綺麗で見やすいTOP画像をつくるには最初は難しいかもしれません。私も初めて作ったTOP画像を今見ると「よくこんな変なの作ったナァ」って思うくらいです。綺麗なTOP画像を作る事ばかりに固執しないでください。ホームページは内容を伝える場所なので、TOP画像ばかりに時間をかけ肝心な内容をおろそかにしない様にしましょう。先ほど作ったTOP画像を今度は自分のパソコンに保存しましょう。ホームページに画像を貼りつける場合「JPEG」や「PNG」といった保存形式にします。インクスケープでは「PNG」形式で保存出来ます。Graphics(ポータブル・ネットワーク・グラフィックス)の略で1996年頃に普及しだした最近のもので画像を圧縮しても画質の劣化が余り無くまさにホームページ上で使うにはとても便利な画像の形式となっています。「PNG形式」以外にも「GIF形式」もメジャーな画像保存形式です。Format(グラフィックス・インターチェンジ・フォーマット)の略でPNGが世に出る前はこちらの保存形式が多かったようです。横道にそれましたが、さっそく画像を保存していきましょう。右上のファイル→「ビットマップにエクスポート」を選択します。画像を挿入する場合はインポートでしたが、保存する場合はエクスポートとなります。すると上の画像のようなものが出現しますので、保存する場所を決めてあとはエクスポートを押すとこれで保存は完了となります。作った画像だけ保存する事も出来ますし、自分で任意の範囲だけ保存も可能なので慣れるまで少しいじってみてください。今回使用した画像編集ソフトはこちらで説明しています。関連記事ホームページ作成時に役に立つ画像編集ソフトまたこれら説明を読まれて「自分には画像の編集なんて無理だなぁ」って感じられた方は、無料ソフトを使うのではなくバナー広告やヘッター画像を作成する専用のソフトを使うと良いかも知れません。いう画像編集ソフトはバナー広告やヘッダー画像を作成するために作られたソフトで、素人の方でもプロ並みのバナーやヘッダー画像を作ることを可能にしたソフトです。自分で作成したホームページの見栄えを少しでも良くしたいが、画像編集を自分でするには不安だなぁと思われる方は是非使ってみるといいかも知れませんよ。始めてホームページを作成する方はにとってはどのように作り始めたら良いのかなど分からないかと思います。そこで、はじめてHPを作成する際に押さえておきたい箇所をまとめてみました。ここに記載している以外にもまだまだたくさんHP作成ヒントはございますが、最初からあれもこれもと説明を聞くと頭の中がグチャグチャになってしまいます。...続きを読む2019/6/26無料編集ソフトを使ってトップ画像を作ってみる最近ではレスポンシブデザインが主流になってきたのでTOP画像の作成頻度は少なくなってきましたが、以前このサイトで使用していたTOP画像の作成方法の説明をしていきたいと思います。トップ画像に限らず画像の編集作業を覚えておくと、ホームページを作成していく際にバナー広告なども作ることが出来るようになるので色々と役立つことが多いかと思います。実際に無料で使えるソフト(フリーソフト)を使ってトップ画像を作っていきたいと思います。自分でホームページの作成をするようになると、PCの画面をそのままキャプチャし画像を使用することが度々あるかと思います。そんな時に簡単にキャプチャした画像をその場で加工し保存できる無料のツールをご紹介したいと思うます。Screenshot』ですが、キャプチャから簡単な画像の加工までこのツール1つで出来るので大変重宝しています。...続きを読む2019/5/28無料メールドレスを取得する方法インターネットを使って色々なことをやろうとされている方やホームページを作ろうとしている方は、プライベート用と仕事用とでメールアドレスを複数持つことをおすすめいたします。仕事用などで利用されるメールアドレスなら無料で取得できるアドレスは避けてるようにした方が良いですが、仕事以外に使用するなら無料のメールアドレスで十分かと思います。『複数のメールアドレスを取得した方が良いのか』というお話をさせていただきます。見た目が綺麗なホームページを作ろうと思うと必ず必要になってくるのが、画像などを編集することが出来る編集ソフトです。Illustrator)』といった高額な編集ソフトではないでしょうか。...続きを読む2019/8/28ホームページ作成にはとっても大事なキーワード選び始めてホームページを作る作業において、HPのキーワード選びはとても重要な作業です。HP作成初心者の方が初めから必要に応じたキーワードを選ぶことが出来ないのかも知れません。レスポンシブデザインauthorこちらも一緒に読まれていますホームページ作成にはとっても大事なキーワード選び始めてホームページを作る作業において、HPのキーワード選びはとても重要な作業です。始めてホームページを作成する方はにとってはどのように作り始めたら良いのかなど分からないかと思います。...無料メールドレスを取得する方法インターネットを使って色々なことをやろうとされている方やホームページを作ろうとしている方は、プライベート用と仕事用とでメールアドレスを複数持つことをおすすめいたします。見た目が綺麗なホームページを作ろうと思うと必ず必要になってくるのが、画像などを編集することが出来る編集ソフトです。私の知人にカイロプラクティック院を経営している人がいるので、その方のホームページのお話をします。この知人は地元のホームページ制作業者にネット集客などが出来る様にと、自身のお店のHP作成を依頼しました。自分でホームページの作成をするようになると、PCの画面をそのままキャプチャし画像を使用することが度々あるかと思います。30歳になるのをきっかけに退職し、今では自由気ままな個人事業主をしています。そんな自由な時間を手に入れることが出来たのもホームページによる集客が成功したおかげでです。