Utwórz dwa lub więcej klikalnych obszarów, dodając nowe plasterki w programie Photoshop.
Źródło obrazu: Zdjęcie dzięki uprzejmości firmy Adobe.
Używając narzędzia Slice w programie Adobe Photoshop CC, możesz przekształcić dowolny obraz lub jego część w hiperłącze, które można kliknąć. Połów tej funkcji polega na tym, że aby hiperłącze działało, musisz zapisać obraz jako plik HTML, a nie zwykły JPG lub PNG. Na szczęście jest to funkcja, z której może skorzystać każdy, nawet jeśli nie jesteś ekspertem w kodowaniu. Photoshop tworzy kod HTML dla Ciebie i osadza obraz w formacie obrazu przyjaznym dla Internetu.
Krok 1
Wybierz „Narzędzie Plasterek”.
Źródło obrazu: Zdjęcie dzięki uprzejmości firmy Adobe.
Otwórz dowolny obraz w Photoshopie. Idealnie powinno to być coś wystarczająco dużego, aby dobrze wyświetlać się w przeglądarce internetowej. Wybierz "Narzędzie Slice" z Przybornika. Jeśli nie jest widoczne, kliknij i przytrzymaj prawy dolny róg narzędzia Kadrowanie lub inne widoczne narzędzie w grupie, a następnie wybierz „Narzędzie Cięcie na plasterki”.
Wideo dnia
Krok 2
Przeciągnij kursor nad obrazem, aby utworzyć plasterek.
Źródło obrazu: Zdjęcie dzięki uprzejmości firmy Adobe.
Przeciągnij kursor nad obszar, który chcesz kliknąć. Aby utworzyć pojedyncze hiperłącze na obrazie, możesz przeciągnąć kursor na cały obraz.
Krok 3
Twórz tyle plasterków, ile chcesz.
Źródło obrazu: Zdjęcie dzięki uprzejmości firmy Adobe.
Przeciągnij kursor narzędzia Cięcie na plasterki tylko na część obrazu, jeśli chcesz uzyskać więcej niż jedno hiperłącze. Po zwolnieniu przycisku myszy możesz utworzyć drugi plasterek dla następnego hiperłącza. Jeśli chcesz, możesz utworzyć kilkanaście hiperłączy na jednym obrazie.
Krok 4
Kliknij dwukrotnie plasterek, aby dodać hiperłącze.
Źródło obrazu: Zdjęcie dzięki uprzejmości firmy Adobe.
Kliknij dwukrotnie plasterek za pomocą narzędzia Cięcie na plasterki, aby otworzyć okno Opcje plasterka. Aby utworzyć hiperłącze, musisz wpisać adres strony internetowej w polu „URL”. Podczas gdy inne pola są opcjonalne, użycie nazwy pomoże odróżnić jeden link od drugiego. Dodanie „_blank” do pola Cel określa, że łącze powinno otwierać się w nowej karcie przeglądarki internetowej. Pole Alt Tag to tekst, który jest wyświetlany, gdy obraz nie jest widoczny w przeglądarkach innych niż graficzne lub podczas ładowania obrazu. Pole Tekst komunikatu jest tym, co przeglądarka wyświetla zamiast adresu URL na pasku stanu.
Krok 5
Zapisz plik w formacie HTML.
Źródło obrazu: Zdjęcie dzięki uprzejmości firmy Adobe.
Wybierz „Zapisz dla Internetu” z menu Plik, gdy linki będą gotowe. Wybierz „PNG-24” lub „JPG” jako ustawienie wstępne, a następnie kliknij przycisk „Zapisz”. Kliknij menu „Format” i wybierz „HTML i obrazy”. Zmienia to format pliku na HTML. Po kliknięciu przycisku „Zapisz” program Photoshop tworzy pojedynczą stronę HTML, korzystając z obrazu i utworzonych linków. Sam plik obrazu jest zapisywany w folderze Obrazy. Prześlij zarówno plik HTML, jak i folder Obrazy do tego samego katalogu w swojej witrynie internetowej, korzystając z ulubionego klienta FTP.
Wskazówka
Za pomocą podstawowego edytora tekstu, takiego jak Notatnik, możesz edytować kod pliku HTML, tak jak w przypadku dowolnej strony sieci Web. Na przykład, jeśli wolisz przechowywać obrazy witryny w innym folderze, możesz zmienić określony folder „/images” na dowolny wybrany folder, a następnie przenieść obraz do tego folderu.
Nie potrzebujesz programu Photoshop, aby dodać hiperłącze do obrazu na stronie internetowej lub w wiadomości e-mail. Większość programów pocztowych zawiera funkcję hiperłącza, zwykle dostępną po kliknięciu prawym przyciskiem myszy obrazu po wstawieniu go do wiadomości. Jeśli prześlesz obraz do swojej witryny, możesz dodać go jako klikalny obraz do dowolnej strony, używając kodu HTML5, takiego jak: 
