JPGにクリック可能なWebリンクを作成しますか? PhotoshopはAdobeの多用途グラフィック編集ソフトウェアです。Photoshopは従来のグラフィック作業以外の多くの作業に使用できます。Webサイトを作成する場合があり、リンクが含まれる写真を追加したい場合があります。Photoshopを使用してJPEG画像にハイパーリンクを追加できます。Photoshopを使用して画像にハイパーリンクを追加すると、PhotoshopはHTMLコードも提供するため、画像をWebサイトに埋め込むことができます。
PhotoshopでJPEG画像にハイパーリンクを追加する方法
PhotoshopでJPEGにハイパーリンクを追加は、画像全体または画像の一部に対して行うことができます。Photoshopで画像にハイパーリンクを設定する機能は、Webサイトに画像を追加する場合に最適です。画像を使用する他のWebサイトのEコマースは、これらの画像をクリック可能にすることができます。Webページは1つの画像としてPhotoshopで作成し、リンクを追加することもできます。このようにして、WebページはPhotoshopで美しくデザインできます。手順は次のとおりです。
- 画像を準備する
- ハイパーリンクを追加する
- 保存する
1] 画像を準備する
ファイルから開くに移動するか、Ctrl + Oを押してPhotoshopで画像を開きます。開くダイアログボックスが表示されます。画像を検索してクリックし、開くを押します。コンピューターで画像を見つけて右クリックし、プログラムから開くを選択してAdobe Photoshopを選択することでも画像を開くことができます。Photoshopで画像を開くもう1つの方法は、画像を見つけてクリックし、Photoshopにドラッグすることです。
これは、ハイパーリンクが追加される画像です。画像はベーカリーのWebサイトのバナーです。
ハイパーリンクを設定する画像はお手持ちの画像で現在作業中の画像です。どちらの場合も、画像を魅力的で有益なものにして、クリックされるようにします。開いた画像は編集して、ここをクリックなどのクリックを促す言葉を追加できます。
クリック可能にするPhotoshop内でWebページを作成する場合は、画像として作成して保存する必要があります。次に、クリック可能にする場所を決定します。通常、クリック可能なボタン、画像、ロゴ、Webページの他の部分があります。Photoshopで作成した画像にハイパーリンクを追加する方法は、PhotoshopファイルをJPEGとして保存してからJPEGをPhotoshopで開き、リンクを追加することです。
2] ハイパーリンクを追加する
画像の準備が整い、見た目が満足できたら、次のステップに進みます。ハイパーリンクを設定する画像の一部またはすべてを決定します。完成した画像またはWebページをPhotoshop PSDファイルとして保存することをお勧めします。これにより、必要に応じて画像を変更できます。画像のコピーを別のファイル形式で保存して、ハイパーリンクを追加できます。画像はWebで使用されるため、JPEGとして保存してからハイパーリンクを追加するのが最善です。ボタン、テキスト、アイコン、またはハイパーリンクを追加するその他のものを追加できます。
画像をスライスする
画像の準備が整い、すべてが整ったら、ハイパーリンクを追加します。これを行う前に、ハイパーリンクを追加する画像の部分をスライスする必要があります。
左のツールパネルに移動してスライスツールを探します。切り抜きツールのポップアウトメニューと同じ場所にあります。スライスツールが表示されない場合は、切り抜きツールをクリックして押し続け、ポップアウトメニューが表示されるまで待ちます。次に、クリックしてスライスツールを選択します。
スライスツールを選択すると、ハイパーリンクを設定する画像内の任意のものの周りを描くことができます。
画像、テキスト、アイコン、ボタン、または選択するものを囲むだけです。項目の上で斜めにクリックしてドラッグすると、番号と線が表示されたボックスが表示されます。作成された各スライスには番号が付きます。キーボードの方向キーを使用して、画像の周りのスライスマーキングを移動して調整できます。また、側面にカーソルを合わせて両端の矢印が表示されるまで待ってからクリックしてドラッグすることで、項目の周りのスライスボックスを大きくしたり小さくしたりできます。
この記事では、詳細情報のクリックとコック帽がハイパーリンクされます。必要に応じて、さらに多くの項目をハイパーリンクできます。コック帽はホームページにハイパーリンクされているため、ユーザーはクリックするたびにホームページに移動します。詳細情報のクリックは、セールに関する詳細情報またはユーザーに見つけさせたい情報があるページにリンクできます。
画像の複数の場所にハイパーリンクを追加するには、スライスツールを各領域の周りに次々と描画します。各スライスに同じURLまたは異なるURLを追加できます。
これは、スライスが表示された画像です。コック帽と詳細情報ボタンはハイパーリンクされている部分です。ただし、画像にはテーブルに切り取られたように見える線があります。これは、画像が実際にスライスされてテーブルに配置され、HTMLコードがWebページでそれらをまとめるためです。
URLを追加する
スライスが作成されたら、スライスにURLを追加する時です。ハイパーリンクするスライスを右クリックしてスライスのオプションを編集を選択します。
スライスのオプションダイアログウィンドウが表示され、情報を入力できます。画像の名前と、ユーザーがクリックしたときに移動するURLを追加できます。新しいタブでリンクを開きたい場合は、ターゲットフィールドに_blankと入力します。視覚障害のある人がリンクに簡単にアクセスできるようにするには、Altタグフィールドに説明的なテキストを追加します。情報の入力が完了したら、OKを押して情報を確定し、ウィンドウを閉じます。すべてのスライスで手順を繰り返します。
これは、スライスのオプションのダイアログボックスの入力例です。
3] 保存する
画像の準備が整い、ハイパーリンクが追加されたので、Webサイトで使用できるように保存します。保存するには、ファイルに移動してWeb用に保存を選択するか、Alt + Shift + Ctrl + Sを押します。一部のバージョンのPhotoshopでは、ファイルに移動してWeb用に保存（従来）を選択する必要があります。
Web用に保存ダイアログウィンドウが表示されます。
上部にGIFがある場合は、ドロップダウン矢印をクリックしてJPEGを選択します。これにより、出力がJPEGとして保存されます。JPEGは、サイズが小さく、Photoshopがファイルをラスタ画像として保存するという事実から、Webで使用するための優れた画像形式です。ラスタ画像はWebでの表示に最適です。これが完了したら、Web用に保存ダイアログボックスの下部にある保存をクリックします。
これにより、最適化して保存ウィンドウが開きます。形式に移動して、ファイル形式としてHTMLと画像を選択します。ファイル名の拡張子が.htmlに変更されたことに注意してください。Photoshopは、画像のハイパーリンクを含むHTMLファイルと画像を保存します。フォルダーの保存場所を選択します。
HTMLとして保存すると、複数のファイルとフォルダーが保存されます。デフォルトのブラウザのように見えるHTMLファイルがあります。スライスされた画像の部分を含むフォルダーもあります。心配しないでください。HTMLコードがWebページでそれらをまとめます。
ファイルを保存するときは、HTMLファイルと画像フォルダーを同じ場所に保存してください。HTMLファイルは、ファイルの場所を使用して画像ファイルにリンクされます。それらをまとめるためにフォルダーを作成する必要がある場合があります。完了したら、保存をクリックします。
保存が完了したら、選択した場所に移動すると、HTMLファイルと画像フォルダーが表示されます。HTML Webページをクリックすると、画像がWebページのように開き、リンクをクリックできるようになります。ただし、これらはWebページやインターネットには移動せず、ファイルにアクセスできないと表示されるだけです。これは、ファイルがアクティブなWebページから分離されているために発生します。
HTMLコードを表示したい場合は、HTMLファイルを右クリックしてメモ帳、メモ帳++、Adobe Dreamweaver、または別のテキストエディターで開くを選択すると、HTMLコードが表示されます。
メモ帳に表示されるHTMLコード。
HTMLファイルをWebページとして開き、ページを右クリックして検査を選択することもできます。これにより、ページのHTMLコードが表示されます。
検査オプションを選択すると、コードが表示されます。
PhotoshopでJPEGにハイパーリンクを追加できますか?
PhotoshopでJPEG画像にハイパーリンクを追加できます。Photoshopでファイルを開きます。スライスツールを使用して、ハイパーリンクを設定する画像の周りを描画します。画像を右クリックしてスライスのオプションを編集を選択します。ファイルをHTMLとして保存すると、HTMLファイルと画像リソースを含むフォルダーが作成されます。これらをWebページに追加できます。
Gmailで画像にハイパーリンクを設定できますか?
通常どおり画像をGmailメールに配置します。次に、画像を選択し、作成ウィンドウの下部にあるリンクアイコンをクリックします。画像をリンクするWebアドレスを入力し、[OK]ボタンをクリックします。
Photoshopで画像に複数のハイパーリンクを追加する方法
PhotoshopでJPEGに複数のハイパーリンクを追加できます。Photoshopでファイルを開きます。スライスツールを使用して、ハイパーリンクを設定する画像の部分の周りを描画します。ハイパーリンクを設定する各部分を右クリックして、スライスオプションの情報を入力します。ファイルをHTMLとして保存すると、HTMLファイルと画像リソースを含むフォルダーが作成されます。これらをWebページに追加すると、別々のスライスが再構成され、各スライスに別々のハイパーリンクを持つ単一の画像になります。
コメントする