Jak zaprojektować oszałamiającą stronę docelową dla witryny z portfolio w programie Adobe Muse
Lista nakazów i zakazów dla witryny z portfolio jest nieskończona. Jednak z tych list znalazłem dwie wspólne cechy – unikanie zapełniania jednej strony wszystkim oraz utrzymywanie strony docelowej i nawigacji tak prostych, atrakcyjnych i łatwo dostępnych, jak to tylko możliwe.
Tego dowiesz się z tego samouczka. Oprócz tego będziesz:
- Dowiedz się, jak zoptymalizować grafikę na potrzeby witryny Muse za pomocą programu Adobe Illustrator (niezbędne do szybszego wczytywania zawartości witryny)
- Być w stanie wyświetlać zawartość w perspektywie za pomocą programu Photoshop.
- Dowiedz się, jak zaprojektować profesjonalną stronę docelową w programie Adobe Muse.
WYMAGANIA TEGO TUTORIAL:
Aby właściwie zrozumieć i stworzyć dokładnie to, co pokazano w tym samouczku, musisz pobrać określone zasoby z różnych bezpłatnych zasobów. Jednak nadal możesz śledzić bez nich.
-
Przejdź do https://goo.gl/KVL9r1 i pobierz ten obraz nagłówka. Jego wymiary muszą wynosić 1400 x 750 pikseli. Oto zrzut ekranu z serwisu. Umieść ten rozmiar w niestandardowych pudełkach i pobierz go.
-
Przejdź do http://goo.gl/ZeHxOF i http://goo.gl/BASRSP i pobierz pakiet ikon mediów społecznościowych oraz ikonę strzałki w dół.
-
Logo użyte w tym samouczku można pobrać tutaj (hiperłącze – plik „assets.rar" jest dołączony do wiadomości e-mail)
-
Przejdź do strony http://goo.gl/mzw1Xh i pobierz wektor ekranu iMaca 27", który będzie używany do wyświetlania projektu "projektu strony internetowej".
-
Otwórz kreatywną aplikację komputerową w chmurze i pobierz makiety mini iPhone’a i iPada, jak pokazano poniżej. Zostaną one automatycznie dodane do Twojej biblioteki programu Photoshop.
![]()
KROK 1: JAK ZOPTYMALIZOWAĆ GRAFIKĘ DLA SIECI W PROGRAMIE ADOBE ILLUSTRATOR:
1. Otwórz plik „eps” ikon społecznościowych w programie Illustrator. Wybierz ikonę Facebooka (wersja kwadratowa) i naciśnij Ctrl+Shift+G, aby rozgrupować te ikony.
2. Kliknij poza obszarem roboczym i ponownie wybierz ikonę Facebooka. Następnie przejdź do panelu transformacji znajdującego się na górze i ustaw W=19.5, H=19.5 i naciśnij enter.
3. Naciśnij klawisze Ctrl+C, a następnie Ctrl+N. W tym nowym oknie dialogowym dokumentu umieść „static_facebook_icon” w polu Nazwa, W=20 i H=20. Upewnij się, że wybrano piksele z rozwijanej listy jednostek. Kliknij OK.
4. Naciśnij klawisze Ctrl+V, aby wkleić ikonę Facebooka i odpowiednio ją wyrównać.
5. Przejdź do Plik > wybierz „zapisz dla Internetu” (Alt+Shift+Ctrl+S). Wybierz PNG-24 z rozwijanej listy znajdującej się w prawym górnym rogu. Kliknij Zapisz i zapisz go w żądanej lokalizacji. Zapisz także plik ilustratora (Ctrl+S)
6. Powtórz kroki od 2 do 5 dla ikon Twittera, Google Plus, LinkedIn i Behance i zapisz je w Internecie.
UWAGA: Wybraliśmy format png, ponieważ mają one doskonałą przezroczystość, stosunkowo mniejszy rozmiar i najlepiej nadają się do ikon i wektorów.
7. Podobnie zoptymalizuj te pięć ikon dla obrazu nagłówka. Tym razem zmień ich kolor na biały. Aby to zrobić, wybierz ikonę, przejdź do listy rozwijanej Wypełnij znajdującej się w lewym górnym rogu pod menu aplikacji, wybierz biały kolor i zapisz dla sieci. Teraz masz 10 ikon – 5 szarych i 5 białych.
8. Następnie zoptymalizuj ikonę strzałki w dół (kolor: biały, dokument W=30px, H=20px) i zapisz ją dla sieci jako PNG-24.
9. Teraz utwórz nowy dokument o rozmiarze 1400 x 750 pikseli i nazwij go jako obraz_nagłówka. Kliknij OK.
10. Przejdź do Plik > Umieść i wyszukaj obraz pobrany z pexels.com. Kliknij płótno, aby je umieścić i dopasować do płótna.
WSKAZÓWKA: Naciśnij „Z” na klawiaturze, przytrzymaj klawisz alt i kliknij kilka razy obszar roboczy, aby trochę pomniejszyć widok, aby wszystko było widoczne od razu.
11. Wybierz narzędzie Prostokąt z przybornika znajdującego się po lewej stronie okna aplikacji. Utwórz prostokąt i przekształć go na W=1400, H=750px. Następnie przeciągnij ten prostokąt na umieszczony obraz.
12. Po zaznaczeniu tego prostokąta przejdź do listy rozwijanej wypełnienia, wybierz menu bibliotek próbek znajdujące się w jego lewym dolnym rogu. Na tej liście przejdź do „Gradientów” i wybierz „Ton ziemi”.
13. Wybierz kolor ziemisty 30, jak pokazano na poniższym zrzucie ekranu, i zamknij ten panel.
14. Mając wciąż zaznaczony prostokąt, przejdź do zakładki Gradient znajdującej się po prawej stronie okna aplikacji. Jeśli go tam nie ma, naciśnij Ctrl + F9. Kliknij, przytrzymaj i przeciągnij środkowy suwak gradientu maksymalnie w lewo.
15. Następnie w polu „Krycie” (znajdującym się na górze) wpisz 87% i naciśnij Enter.
16. Zapisz ten obraz w Internecie. Tym razem wybierz JPEG i jakość=86%. Zapisz także plik programu Illustrator.
KROK 2: PRZYGOTOWANIE ZASOBÓW W PHOTOSHOPIE:
17. Otwórz Adobe Photoshop CC. Przejdź do Plik> wybierz „Nowy”. Wpisz nazwę jako „ecommerce_design”, W=619px i H=310px.
18. Z panelu Biblioteki (znajdującego się po prawej stronie) wybierz makietę iPada mini, którą pobraliśmy i przeciągnij ją na płótno.
19. Przytrzymaj klawisz Shift i zwiększ jego rozmiar, przeciągając rogi i dostosuj go do płótna, jak pokazano poniżej.
UWAGA: Możesz użyć narzędzia powiększania. Aby przełączać się między narzędziami powiększania i zaznaczania, naciskaj klawisze „Z” i „V” na klawiaturze. Ponadto, jeśli nie możesz znaleźć panelu bibliotek (lub innego panelu), po prostu przejdź do menu Okno > wybierz Biblioteki.
20. Wybierz narzędzie Prostokąt i utwórz prostokąt o dowolnym rozmiarze wewnątrz płótna (nie przejmuj się jego kolorem wypełnienia). Pojawi się okno właściwości. Wewnątrz tego umieść W=1024px i H=768px i upewnij się, że ikona łańcucha nie jest zaznaczona.
21. Teraz kliknij ikonę łańcucha, aby go wybrać. Wpisz W=290px i naciśnij enter. Zwiń ten panel właściwości.
22. Pod panelem Warstwy znajdującym się po prawej stronie wybierz ‘Rectabgle 1’, kliknij go prawym przyciskiem myszy i wybierz ‘convert to smart object’.
23. Następnie przejdź do menu edycji > wybierz „Dowolna transformacja”. Ponownie otwórz menu edycji> przekształć> wybierz „zniekształcenie”.
24. Przytrzymaj jeden róg prostokąta tak, aby pokrywał się z jednym rogiem ekranu iPada. Zrób to dla wszystkich czterech rogów i naciśnij enter. Otrzymasz następujący wynik. W razie potrzeby użyj narzędzia powiększania.
25. W panelu Warstwy kliknij prawym przyciskiem myszy warstwę tła i usuń ją. Uczyń także warstwę „prostokąt 1″ niewidoczną, klikając ikonę małego oka po lewej stronie.
26. Powtórz kroki od 18 do 22, aby utworzyć jeszcze jeden prostokąt, przekształć go w inteligentny obiekt i spraw, aby jego każdy róg pokrywał się z rogami ekranu iPada, a następnie naciśnij Enter.
27. Spraw, aby warstwa „prostokąt 1″ była widoczna, a warstwa „ipad” niewidoczna.
28. Kliknij prawym przyciskiem myszy warstwę „prostokąt 1″ i wybierz „edytuj zawartość”. Otworzy się w nowej karcie. Przejdź do Plik > Umieść osadzony, wyszukaj „screen1.webp”, który można znaleźć w pobranym folderze Logos. Kliknij miejsce i naciśnij enter. Naciśnij klawisze Ctrl+S. Ta zmiana zostanie zaktualizowana w prostokącie 1 w naszym głównym pliku. Zamknij tę kartę.
29. Podobnie zrób to dla prostokąta 2 z „screen2.webp” i zapisz go. Przesuwaj warstwy w górę lub w dół w panelu warstw zgodnie z własnymi preferencjami. Usuń warstwę iPada.
30. Kliknij prawym przyciskiem myszy dowolną warstwę prostokąta i wybierz „opcje mieszania”. Pojawi się okno stylu warstwy. Wybierz ostatnią opcję, którą jest „cień” i umieść wartości, jak pokazano poniżej.
31. W tym oknie dialogowym, tuż obok trybu mieszania, znajduje się pole koloru. Kliknij go i wybierz następujące wartości kolorów.
32. Zastosuj ten sam efekt cienia również do drugiej warstwy. Naciśnij Alt+Ctrl+Shift+S. Wybierz PNG-24 i kliknij Zapisz. Otrzymasz następujący wynik.
UWAGA: W ten sposób możesz umieścić stronę internetową lub dowolny obraz w perspektywie. Musisz tylko znać dokładną rozdzielczość urządzenia, na którym zamierzasz go umieścić. Zrób to dla makiet iPhone’a i iMaca do wyświetlania projektów „projektowania logo” i „projektowania stron internetowych”, jak pokazano poniżej.
KROK 3: KONFIGURACJA MIEJSCA ROBOCZEGO W MUSE:
33. Otwórz program Adobe Muse CC. Zostaniesz powitany ekranem powitalnym. W sekcji „Utwórz nową” kliknij witrynę, a pojawi się okno dialogowe nowej witryny.
UWAGA: Innym sposobem utworzenia nowej witryny jest przejście do opcji Plik > Nowa witryna lub Ctrl+N.
34. W tym oknie dialogowym znajduje się menu rozwijane z napisem „szerokość płynu”. Otwórz to, klikając i wybierz „Stała szerokość” i zmień wartości szerokości strony i kolumn, jak pokazano poniżej. Wartość pola „gutter” zmieni się automatycznie.
35. Rozwiń opcję ustawień zaawansowanych i upewnij się, że pole wyboru „lepka stopka” jest zaznaczone. Upewnij się również, że witryna jest „wyśrodkowana” w obszarze przeglądarki. Kliknij OK. Muse przeniesie Cię do trybu PLAN.
36. Naciśnij Ctrl+S i zapisz swoją witrynę w wybranym miejscu. Zalecam utworzenie osobnego folderu dla swojej witryny i zapisywanie go za każdym razem, gdy wprowadzasz zmiany.
UWAGA: Płynna szerokość służy do tworzenia responsywnego układu. Wybraliśmy stałą szerokość, ponieważ stworzymy efekt przewijania, który nie działa w przypadku płynnych witryn.
37. Kliknij dwukrotnie „A-master” znajdujący się na dole w szarym obszarze. Z przybornika znajdującego się po lewej stronie okna aplikacji wybierz „narzędzie tekstowe”.
38. Utwórz pole tekstowe na płótnie. Naciśnij Ctrl + T, aby otworzyć panel tekstowy i pod listą rozwijaną czcionek wyszukaj czcionki internetowe i wybierz „dodaj czcionki internetowe”.
39. Pojawi się nowe okno. Wybierz zakładkę „czcionki internetowe Edge”, wyszukaj i pobierz kolejno następujące czcionki:
- Monotonia
- Teleks
- Liczby
- Raleway
- Bok
- Problemy
Po pobraniu tych czcionek usuń pole tekstowe.
40. Otwórz panel „Warstwy” znajdujący się po prawej stronie lub przejdź do menu Okno > wybierz „Warstwy”. Kliknij małą ikonę złożonego papieru znajdującą się w prawym dolnym rogu. Kliknij dwukrotnie, aby utworzyć dwie kolejne warstwy.
41. Kliknij dwukrotnie „warstwa 1″. Pojawi się okno opcji warstw. Pod nazwą umieść „home_header” i kliknij OK. Powtórz ten proces dla pozostałych dwóch warstw i nazwij je odpowiednio jako „static_header” i „content”.
42. Ułóż warstwy w kolejności pokazanej poniżej, po prostu przeciągając je w górę lub w dół i zapisz zmiany.
UWAGA: Ułożyliśmy warstwy w tej kolejności, ponieważ chcemy, aby nasz nagłówek znajdował się na górze wszystkiego innego. Warstwy to skuteczny sposób organizowania i układania zawartości witryny, zwłaszcza gdy układ staje się złożony.
43. Wybierz warstwę „static_header” i zwiń ten panel.
KROK 4: USTANOWIENIE NAGŁÓWKA STATYCZNEGO:
44. U góry strony widać dwa przewodniki. Pierwszy to przewodnik „na górze strony”, a drugi to „przewodnik po nagłówku”. Kliknij, przytrzymaj i przeciągnij poniższą prowadnicę nagłówka i ustaw ją na 80 pikseli. Możesz to zrobić za pomocą linijek. To jest nasz obszar nagłówka.
45. Wybierz narzędzie Prostokąt lub naciśnij „M” na klawiaturze. Utwórz mały prostokąt na płótnie i upewnij się, że jego kolor obramowania to „czerwony”, co wskazuje, że ten obiekt znajduje się w warstwie „static_header”.
46. Przejdź do opcji „Zmień rozmiar” (lub „Przekształć” w starszych wersjach Muse) znajdującej się w prawym górnym rogu, kliknij ją i ustaw H=80.
47. Przeciągnij ten prostokąt i umieść go w obszarze nagłówka w taki sposób, aby zatrzasnął się z prowadnicami „góry strony” i „nagłówka”.
48. Teraz zwiększymy szerokość prostokąta do 100%, aby był skalowalny dla każdego rozmiaru ekranu. Rozwiń prostokąt do obu krawędzi i upewnij się, że przylega do krawędzi strony. Kiedy dotrzesz do krawędzi, na pomarańczowej prowadnicy pojawi się informacja, że obiekt został zwabiony i pojawi się komunikat W=100% lub W=1400.
49. Po zaznaczeniu prostokąta kliknij listę rozwijaną Wypełnij pod menu aplikacji i wybierz kolor biały.
50. Kliknij słowo „obrys” obok wypełnienia. Kliknij ikonę łańcucha, aby go zerwać i wpisz „1″ w polu wagi dolnego uderzenia.
51. Następnie kliknij menu rozwijane koloru obrysu, wprowadź wartości dla R, G i B po 235. Następnie kliknij ikonę papieru z zagiętą krawędzią, aby utworzyć nową próbkę. Pojawi się okno opcji próbki. Kliknij OK i zapisz zmiany.
52. Przejdź do Plik > Umieść. Wyszukaj „static_logo.webp” i kliknij otwórz. Kursor zmieni swój wygląd na pistolet załadowany obrazem. Kliknij płótno, aby je umieścić.
53. Następnie przenieś ten obraz na prostokąt nagłówka i wyrównaj go do jego pionowego środka (niebieska linia wskaże, kiedy jest wyśrodkowany) i przyciągnij go do lewej krawędzi, jak pokazano poniżej.
54. Ponownie przejdź do Plik > umieść i wybierz wszystkie statyczne ikony mediów społecznościowych, które zoptymalizowaliśmy za pomocą programu Illustrator. Kliknij Otwórz. Zobaczysz, że pistolet umieszczający będzie miał numer (5) oznaczający pięć załadowanych obrazów. Jeśli chcesz przełączyć się na inną ikonę, aby umieścić ją jako pierwszą, możesz użyć klawiszy strzałek na klawiaturze. Umieść je jeden po drugim.
55. Wybierz wszystkie ikony i przejdź do panelu „Wyrównaj” znajdującego się obok opcji Zmień rozmiar w prawym górnym rogu. Z listy rozwijanej „Wyrównaj do” wybierz „Wyrównaj do obiektu kluczowego”.
56. Następnie wpisz 11 w polu dostępnym pod opcją „Rozmieść odstępy”. Kliknij opcje „A” i „B”, jak pokazano na zrzucie ekranu poniżej.
57. Po zaznaczeniu tych ikon kliknij prawym przyciskiem myszy i wybierz „grupa” lub Ctrl+G. Przenieś tę grupę na prostokąt nagłówka i przyciągnij ją do prawej krawędzi w linii z logo, jak pokazano poniżej.
58. Utwórz pole tekstowe i wpisz w nim HOME. Naciśnij Ctrl + T i wybierz Czcionka: teleks, rozmiar: 13, kolor: czarny, wyrównany do środka i 120% interlinii. Dostosuj szerokość i wysokość tego pola tekstowego zgodnie z rozmiarem czcionki.
59. Podobnie utwórz cztery kolejne pola tekstowe na PRACA, USŁUGI, KONTAKT i O. Wybierz je wszystkie, przejdź do wyrównania panelu i powtórz to, co zrobiliśmy z ikonami mediów społecznościowych. Tym razem zmień odstępy dystrybucji na 50. Zgrupuj i przenieś je do prostokąta nagłówka, jak pokazano poniżej.
60. Teraz przypniemy te obiekty do górnej części przeglądarki, co sprawi, że nasz nagłówek będzie statyczny. Oznacza to, że zawsze będzie wyświetlany u góry przeglądarki, niezależnie od przewijania. Aby to zrobić, wybierz prostokąt nagłówka, przejdź do „Przypnij” znajdującego się w prawym górnym rogu i kliknij wewnątrz jego górnego środkowego kwadratu, jak pokazano poniżej.
61. W podobny sposób przypnij logo w lewym górnym rogu, grupę menu w środkowym górnym rogu, a grupę ikon społecznościowych w prawym górnym rogu. Nasz statyczny nagłówek jest gotowy.
KROK 5: USTALENIE STOPKI:
62. Na dole zobaczysz trzy prowadnice, a mianowicie – stopkę, dół strony i dół przeglądarki. Kliknij, przytrzymaj i przeciągnij przewodnik „dół przeglądarki” i ustaw go na 770 pikseli za pomocą linijek. Następnie przeciągnij prowadnicę stopki i przyciągnij ją do prowadnicy dolnej części strony. To jest nasz obszar stopki.
63. Utwórz prostokąt wewnątrz tego obszaru o wymiarach H=270 i W=546, tak aby jego górny i dolny bok pokrywały się odpowiednio ze stopką i dołem prowadnic przeglądarki.
64. Po zaznaczeniu tego prostokąta kliknij słowo „obrys” i zastosuj tylko górny obrys o wadze „1″ (wartości koloru obrysu: R=235 G=235 B=235). Przejdź do panelu „wyrównaj” i pod wyrównaniem obiektów wybierz „wyrównaj środki w poziomie” (jest to druga opcja).
65. Umieść static_logo.webp i dodaj tekst wewnątrz tego prostokąta, jak pokazano poniżej. (Czcionka tekstu: Arimo, rozmiar: 14, kolor: R=37 G=37 B=37, wyrównanie do środka i 120% interlinii).
66. Symbol praw autorskich, który widzisz przed 2016 rokiem, można dodać z panelu „Glify” znajdującego się po prawej stronie okna aplikacji. Jeśli go tam nie ma, przejdź do Okno > Glify. Nasza stopka jest gotowa.
KROK 6: TWORZENIE NAGŁÓWKA STRONY GŁÓWNEJ I EFEKT PRZEWIJANIA:
67. Zamknij stronę wzorcową i wróć do trybu planowania.
68. Otwórz stronę główną, klikając ją dwukrotnie. Otwórz panel warstw, wybierz warstwę „home_header” i zwiń panel.
69. Zrób tu trochę miejsca, przeciągając warstwę stopki do 4000 pikseli za pomocą linijek.
70. Teraz utwórz prostokąt o szerokości 100%. Pełną szerokość, tak jak zrobiliśmy to wcześniej, można uzyskać, rozszerzając prostokąt od jego lewej i prawej krawędzi i przyciągając go do obu krawędzi strony.
71. Rozwiń prostokąt w górę, przeciągając jego górną krawędź i przyciągnij go do górnej krawędzi prowadnicy strony, jak pokazano poniżej.
72. Przejdź do panelu zmiany rozmiaru, wpisz H=750px.
73. Po zaznaczeniu prostokąta kliknij słowo „Wypełnij” (nie listę rozwijaną kolorów) i kliknij „dodaj obraz”. Wyszukaj plik „header_image.webp”, który pobraliśmy z serwisu Pexels i zoptymalizowaliśmy w programie Illustrator. W menu rozwijanym „dopasowanie” wybierz „skala do wypełnienia” i umieść go w lewym górnym rogu.
74. W samym polu opcji „Wypełnij”, obok opcji „Wypełnij”, znajduje się opcja „Przewiń”. Kliknij go i wstaw 0 w polach ruchu początkowego i końcowego. Oznacza to, że obraz pozostanie nieruchomy, a zawartość będzie się poruszać, tworząc ładny i atrakcyjny wizualnie efekt przewijania.
75. Utwórz pole tekstowe i wpisz w nim „O NASZEJ ZESPOLE”. Czcionka: Telex, rozmiar: 13, wyrównanie do lewej, kolor: biały i interlinia: 120%. Przesuń go i umieść w lewym górnym rogu obrazu w następujący sposób.
76. Umieść wszystkie ikony społecznościowe, które zoptymalizowaliśmy dla naszego obrazu nagłówka. Wyrównaj je w równych odstępach, tak jak w przypadku nagłówka statycznego. Zgrupuj i umieść je w prawym górnym rogu obrazu w następujący sposób.
77. Utwórz pole tekstowe. Powinien mieć wymiar W=944, H=92. Wpisz w nim „PROJEKTUJEMY INTERNET”. Czcionka: monotonna, rozmiar: 72, wyrównana do środka, 120% interlinii. Zmień kolor napisu WEB na R=41 G=171 B=226 i biały dla reszty.
78. Stwórz jeszcze trzy małe pola tekstowe na USŁUGI, KONTAKT i BLOG. Czcionka: Telex, rozmiar: 13, kolor biały, wyrównana do środka i 120% interlinii.
79. Umieść obraz „header_logo.webp”. Dostosuj logo i te cztery pola tekstowe w następujący sposób.
80. Przejdź do biblioteki ‘Widżety’ znajdującej się po prawej stronie. Rozwiń sekcję „Przyciski”. Wybierz „Przycisk stanu” i przeciągnij go na płótno. Zamknij panel widżetów.
81. Ostrożnie zaznacz małe kółko wewnątrz tego przycisku i naciśnij Usuń.
82. Kliknij dwukrotnie w polu tekstowym Lorem Ipsum, zaznacz cały tekst, usuń go i wpisz „PORTFOLIO”.
83. Wybierz narzędzie wyboru (narzędzie strzałki) z przybornika. Przejdź do panelu tekstowego (Ctrl+T) i zmień formatowanie tekstu „portfolio” w następujący sposób.
84. Teraz wybierz przycisk stanu i zmień jego rozmiar na W=177, H=43. Dostosuj odpowiednio pole tekstowe wewnątrz przycisku.
85. Wybierz przycisk. Przejdź do opcji „promień narożnika” (znajdującej się obok obrysu). Kliknij wszystkie cztery rogi, aby je spłaszczyć.
86. Po wybraniu przycisku spójrz w lewy górny róg, pod menu aplikacji. Zauważysz, że „przycisk stanu” jest napisany pogrubioną czcionką. Nazywa się to „bieżącym obszarem wyboru”. Pozwala wiedzieć, co wybrałeś.
87. Tuż obok jest „Normalny”. Kliknij go, a będziesz mieć cztery stany.
88. Dla stanu Normalny zmień kolor wypełnienia na „brak”, a kolor obrysu na biały.
89. Wybierz stan „rollover”, zmień kolor wypełnienia i obrysu na R=41 G=171 B=226.
90. Dla stanu „mysz w dół” i „aktywny” wymagane zmiany zostaną zastosowane automatycznie.
91. Ponownie wybierz jego normalny stan, rozwiń panel „Przejście” znajdujący się na dole. Zaznacz pole wyboru „Zanikanie” i wprowadź wartości, jak pokazano poniżej. Zapisz zmiany.
92. Umieść obraz „down_arrow.webp” pod przyciskiem. Powinieneś mieć następujący wynik.
93. Nasz nagłówek do domu jest gotowy. Przejdź do Plik > Podgląd strony w przeglądarce (Ctrl+Shift+E) i sprawdź, czy wszystko działa poprawnie.
KROK 7: DODAWANIE TREŚCI:
94. Wróć do Muse, otwórz panel warstw, wybierz warstwę „zawartość” i zwiń panel.
95. Przewiń w dół do białej przestrzeni poniżej i utwórz pole tekstowe o wymiarach W=464, H=60. Wpisz w nim „NASZA OSTATNIA PRACA”. Czcionka: Raleway light, rozmiar: 46, kolor: czarny, wyrównana do środka i 120% interlinii. Teraz wybierz słowo „NAJNOWSZE” i zmień jego czcionkę na „Raleway Bold”.
96. Zrób jeszcze dwa pola tekstowe. Jeden o W=376, H=165 i drugi o S=376, H=363.
97. Kliknij dwukrotnie wewnątrz pierwszego i wpisz „PROJEKT STRONY INTERNETOWEJ”. Czcionka: Raleway Extra Light, rozmiar: 77, kolor: czarny, wyrównanie do lewej, 100% wiodących.
98. Kliknij dwukrotnie wewnątrz drugiego i wklej fałszywy tekst z lipsum.com w następujący sposób.
- Dla nagłówka głównego – Czcionka: Lato Bold, rozmiar: 30, kolor: R=33 G=42 B=52, wyrównanie do lewej i 120% interlinii.
- Akapit główny – Czcionka: Lato light, rozmiar: 21, kolor: R=57 G=57 B=57, wyrównanie do lewej i 120% interlinii.
- Dla nagłówka „Referencje klienta” – taki sam jak nagłówek główny, ale rozmiar to 21.
- W akapicie z referencjami – taki sam jak w akapicie głównym, ale czcionka to „Lato Light Italic”
99. Wybierz przycisk stanu „portfolio”, skopiuj go i wklej pod polem tekstowym, które utworzyliśmy w poprzednim kroku. Zmień tekst z portfolio na „WYŚWIETL STRONĘ”
- Dla stanu normalnego – Wypełnienie: brak, obrys i kolor tekstu: czarny.
- Dla stanu najazdu – Kolor wypełnienia i obrysu: R=41 G=171 B=226 oraz kolor tekstu: biały.
100. Umieść obraz „imac z makietą strony internetowej”. Ułóż obraz, pola tekstowe i przyciski w następujący sposób.
101. Przewiń w dół do białej przestrzeni i utwórz prostokąt o wymiarach W=1200, H=5. Zastosuj górną kreskę o gramaturze „1″ i kolorze R=235 G=235 B=235. Umieść go w następujący sposób. Będzie to działać jako separator.
102. Skopiuj pola tekstowe i przyciski, które utworzymy w krokach od 92 do 95, i wklej je poniżej separatora. Zmień tekst pierwszego pola na „PROJEKT LOGO”, a tekst przycisku na „ZOBACZ NA ŻYWO”.
103. Umieść „iphone z makietą logo” i ułóż je w następujący sposób.
104 Następnie skopiuj i wklej separator.
105. Podobnie skopiuj i wklej pola tekstowe i przycisk poniżej tego separatora. Zmień tekst pierwszego pola na „E-COMMERCE”.
106. Umieść plik „ecommerce_design.webp”, który utworzyliśmy i zoptymalizowaliśmy w krokach od 15 do 30 w programie Photoshop. Ułóż wszystko w następujący sposób.
107. Teraz utwórz prostokąt o wymiarach W=1004, H=363 bez wypełnienia i obrysu górnego o grubości „1″ i kolorze: R,G,B=235 każdy.
108. Wewnątrz tego prostokąta utwórz dwa pola tekstowe. W pierwszej wpisz – „WHAT WE BELIEVE IS” (czcionka: Raleway light, rozmiar: 35, kolor: R,G,B=37 każda, wyrównana do środka i 100% z przodu). Wybierz słowo „BELIEVE” i zmień czcionkę na „Raleway bold”.
109. W drugim polu tekstowym wpisz słynny cytat Miltona Glasera, jak pokazano poniżej (czcionka: Lato Light Italic, rozmiar: 70, kolor: R, G, B = 37 każdy, wyrównany do środka i 120% interlinii.
110. Skopiuj i wklej dowolny z powyższych przycisków stanu i zmień jego tekst na „ZOBACZ NASZĄ PRACĘ”. Ułóż wszystko w następujący sposób.
KROK 8: ŁĄCZENIE:
111. W oknie narzędzi wybierz „kotwica łącza” lub naciśnij „A” na klawiaturze. Kursor zmieni swój wygląd na strzelbę załadowaną kotwicą. Umieść tę kotwicę nad polem tekstowym „NASZA OSTATNIA PRACA”, jak pokazano poniżej.
112. Pojawi się okno dialogowe z opcjami zakotwiczenia. W polu nazwy umieść „ostatnia_praca”.
113. Wybierz obraz ze strzałką w dół pod przyciskiem portfolio. Przejdź do listy rozwijanej „Hiperłącza” znajdującej się u góry i wybierz „ostatnia_praca”. Zapisz zmiany i wyświetl podgląd witryny (Ctrl+Shift+E).
KROK 9: DODAWANIE TEKSTU ALTERNATYWNEGO, METADANYCH, TAGÓW POZIOMU I FAVICON:
114. Tekst alternatywny jest sposobem na to, aby wyszukiwarki zrozumiały znaczenie treści zawartej w obrazie i musi być umieszczany przy każdym obrazie dodawanym do witryny. Aby to zrobić, kliknij prawym przyciskiem myszy dowolny z trzech umieszczonych przez nas obrazów i wybierz „edytuj właściwości obrazu”.
115. Pojawi się okno dialogowe właściwości obrazu. Zobaczysz tutaj dwa pola. Jednym z nich jest „podpowiedź”, a drugim „tekst alternatywny”. Podstawowe różnice między nimi są następujące:
| WSKAZÓWKA DO NARZĘDZIA | CAŁY TEKST |
|
|
UWAGA: Powinieneś przeszukać sieć w poszukiwaniu metod i ważnych kwestii związanych z dodawaniem tekstu alternatywnego i metadanych, ponieważ są to główne aspekty lepszego SEO.
116. Aby dodać metadane, wróć do widoku planu, kliknij prawym przyciskiem myszy stronę główną i wybierz „właściwości strony”. Pojawi się nowe okno zawierające trzy zakładki, a mianowicie – układ, metadane i opcje. Przełączaj się między tymi kartami, zapoznaj się z opcjami i dodaj odpowiednie słowa kluczowe.
117. Innym ważnym czynnikiem, który należy wziąć pod uwagę przed umieszczeniem witryny w Internecie, jest zmiana niektórych właściwości tekstu w celu dodania znaczników poziomu.
UWAGA: Zwykle, gdy dodajesz treść pisemną na stronie internetowej, nagłówki są pogrubione i większe niż akapity (lub inny tekst), aby zilustrować różnicę między nimi. My, jako ludzie, możemy rozpoznać tę różnicę. Ale problem polega na tym, że przeglądarka nie rozumie, która część twojego tekstu jest nagłówkiem, a która akapitem, chyba że przypiszesz wyznaczone tagi poziomu do każdego z nich.
Z pewnością zaprezentuje Twoją stronę online tak, jak ją zaprojektowałeś, niezależnie od tego, czy zastosowałeś tagi, czy nie (ze względu na CSS), ale aby stworzyć witrynę przyjazną dla SEO, konieczne jest użycie tych opisowych tagów.
118. Aby to zrobić, zaznacz tekst, przejdź do panelu tekstowego (Ctrl+T), a na dole zobaczysz listę rozwijaną zawierającą wszystkie tagi. Wybierz je odpowiednio i zapisz zmiany.
119. Przejdź do Plik > Właściwości witryny. Na karcie Zawartość ostatnia opcja to „Favicon” (w starszych wersjach Muse znajduje się na karcie Układ). Po najechaniu kursorem na słowo „Favicon” pojawi się podpowiedź opisująca, co to jest i jakie powinny być jego odpowiednie wymiary. Korzystne jest dodanie ikony ulubionych, ponieważ pozwala ona wyróżnić Twoją markę i ułatwić identyfikację witryny, jeśli użytkownicy dodali ją do zakładek.
KROK 10: EKSPORTOWANIE WITRYNY:
120. W końcu przejdź do Plik > Eksportuj jako HTML (Ctrl+E). W polu adresu URL witryny wpisz www.squaremaze.com i wybierz lokalizację, do której chcesz wyeksportować witrynę. Kliknij OK. Nasza strona docelowa jest już gotowa. Możesz go obejrzeć (plik ‘index.html’) w dowolnej przeglądarce i przetestować jego wygląd i działanie.
OSTATECZNY WYNIK:
WNIOSEK
Używanie innych aplikacji, takich jak Illustrator, Photoshop, Fireworks, Fuse i Animate, do tworzenia wysokiej jakości zasobów dla witryny Muse zawsze przynosiło korzyści i zapewniało wyjątkowe rezultaty. To było tylko jedno podejście do projektowania za pomocą tego niesamowitego narzędzia. Śmiało i odkrywaj więcej. Dziękuję.
Comments are closed, but trackbacks and pingbacks are open.