Samouczek: Jak ułożyć stronę internetową w programie Adobe Photoshop

Istnieje ogromna różnorodność narzędzi do projektowania stron internetowych i pracy w całkowicie prosty i funkcjonalny sposób bez wprowadzania lub dotykania kodu. Jest ich niezliczona ilość, proponowana przez aplikacje (Adobe Dreamweaver jest przykładem) lub bezpośrednio przez platformy internetowe, takie jak Wix. Jednak dla projektanta stron internetowych znajomość ręcznych procedur jest niezbędna. HTML5 i CSS to podstawowe filary układu witryn internetowych i stron docelowych.

Jednak częściej niż można by się spodziewać, będziesz musiał skorzystać z aplikacji takich jak Indesign lub Adobe Photoshop aby uzupełnić Twoją pracę nad układem i zapewnić im doskonałe wykończenie. Dzisiaj zobaczymy w tym obszernym samouczku, jak możemy zaprojektować stronę internetową za pomocą Adobe Photoshop. W tej pierwszej części pozostaniemy w pracy, która ma być rozwijana z Photoshopa, chociaż w przyszłych odsłonach zobaczymy, jak możemy zastosować tę pracę już bezpośrednio w kodzie HTML, aby była funkcjonalna.

Począwszy od projektu naszego szkieletu

Aby rozpocząć od układu i projektu strony internetowej, niezwykle ważne jest, abyśmy zaczęli od określenia, jakie będą podstawowe elementy, czyli szkielet. Ta struktura będzie służyć jako wsparcie dla wszystkich treści (tekstowych lub multimedialnych). Definiując każdą z sekcji tworzących naszą stronę, możemy pracować nad nimi z pełną dokładnością i zapewnić możliwie najdokładniejszy projekt wizualny.

Bardzo ważne jest, abyśmy wzięli pod uwagę wymiary, jakie będzie miała nasza strona internetowa, jeśli będzie miała w pudełku lub pełnej szerokości. Strona internetowa w ramce będzie znajdować się w małym pojemniku i dlatego wokół niej pojawi się spacja. Wręcz przeciwnie, pełna, inteligentna sieć zajmie cały ekran urządzenia, które odtwarza stronę. Wybór jednej lub drugiej modalności jest odpowiedzią na pytania czysto stylistyczne i będzie również zależeć od potrzeb projektu, nad którym pracujemy. W tym przykładzie będziemy pracować w trybie pudełkowym, aby nie zajmował całego miejsca zapewnianego przez przeglądarkę.

Aby stworzyć nasz szkielet, pierwszą rzeczą, którą musimy zrobić, jest wejście do aplikacji Adobe Photoshop i podanie wymiarów, które ma mieć nasza strona. W tym przykładzie nasza strona będzie miała szerokość 1280 pikseli. Jednak kwestia rozmiaru może się różnić w zależności od ostatecznego przeznaczenia lub urządzenia, na którym chcemy odtworzyć naszą stronę. Nie ma wątpliwości, że aby projekt strony internetowej był funkcjonalny i wydajny, musi taki być czuły i musi być dostosowany do wszystkich urządzeń na rynku. Jednak w tym przypadku będziemy pracować nad stworzeniem prototypu, który będziemy odtwarzać na komputerze stacjonarnym. Mimo to kwestia responsywności zostanie omówiona później, na razie tutaj jest hierarchia wymiarów ekranu, z którą należy pracować w tym przykładzie. Pamiętaj, że w tym przypadku układ landinga wykonamy w Adobe Photoshop, a następnie przeniesiemy go do HTML5 ORAZ CSS3. Celem tej małej praktyki jest przekształcenie projektu utworzonego w programie Photoshop w użyteczny i interaktywny projekt sieciowy, który reaguje na ruchy użytkownika.

Pomiary dla telefonów komórkowych

iPhone 4 i 4S: 320 x 480

iPhone 5 i 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 × 598

Nexus 5: 360 × 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Pomiary dla tabletów

Wszystkie modele iPada oraz iPada Mini: 1024 x 768

Galaxy Tab 2 i 3 (7.0 cali): 600 x 1024

Galaxy Tab 2 i 3 (10.1 cali): 800 x 1280

Nexus 7: 603 × 966

Nexus 10: 800 × 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Pomiary dla komputerów stacjonarnych

Małe ekrany (używane np. W netbookach): 1024 x 600

Średnie ekrany: 1280 x 720/1280 x 800

Duże ekrany: szerokość większa niż 1400 pikseli, na przykład 1400 x 900 lub 1600 x 1200.

Aby rozpocząć dystrybucję elementów i przypisywanie sekcji w ramach naszej makiety internetowej, bardzo ważne jest, abyśmy wzięli pod uwagę proporcje, aby zapewnić czytelne i melodyjne wykończenie. Konieczne będzie skorzystanie z reguł i opcji przewodników, które można znaleźć w górnym menu Widok. Aby pracować w sposób proporcjonalny i dokładny, najlepiej jest pracować na procentach. Klikamy menu widoku, a następnie opcję «Nowy przewodnik», aby wybrać sposób podziału. W tym przypadku zrobimy cztery pionowe podziały na 25% i weźmiemy je jako odniesienie do umieszczenia naszych obrazów w stopce i obrazu naszego logo w nagłówku.

Istnieje kod do wyznaczenia każdego z obszarów, które będziemy zajmować Model i funkcję, jaką będzie pełnić każdy z nich. Na przykład, aby wskazać obszar, który będzie zajmował obraz, utworzymy prostokąty z rodzajem krzyża. Aby wskazać, że chcemy uwzględnić filmy w określonym obszarze, umieścimy symbol odtwarzania w naszym kontenerze. W tym pierwszym przykładzie będziemy pracować tylko z obrazami, na górnym zdjęciu widać obszar, w którym logotipo z naszej strony internetowej.

To byłby końcowy rezultat naszego wireframe. Jak widać, podzielony jest na nagłówek złożony z obrazka, w którym zostanie znalezione logo i który będzie służył jako link do strony głównej, któremu towarzyszą dwie zakładki, wyszukiwarka i cztery przyciski w polu wyszukiwania. Ponadto, już w treści, umieściliśmy pasek boczny składający się z paska rozdzielającego i szeregu kategorii, które kategoryzują rodzaj treści, które znajdą się na naszej stronie. Kolejna sekcja z numeracją zawierająca wpisy, które będą istnieć w naszej witrynie, a na końcu lista z najbardziej reprezentatywnymi metatagami w naszej witrynie.

W obszarze treści, który zostanie zdefiniowany przez sekcję, która będzie zawierać treści do samodzielnego zarządzania, znajdziemy treść naszych artykułów. W tym przypadku bułka tarta lub bułka tarta (co wskazuje na organiczną strukturę naszej strony internetowej, nagłówek artykułu, metadane, akapit jako treść tekstu, w której znajduje się obraz.

W stopce zamieściliśmy cztery obrazy, które posłużą jako łącze do innych obszarów naszej strony. Tutaj możemy zamieścić logo lub inne ciekawe sekcje. Chociaż w rzeczywistości ten obszar będzie działał bardziej jak stopka wstępna, ponieważ sama stopka zawiera informacje o zasadach użytkowania, uwagach prawnych i prawach autorskich.

Kiedy już zdefiniujemy podstawową strukturę lub szkielet naszej strony, będziemy musieli przejść do następnego poziomu. Będzie to składało się z rzeczywistego projektu każdego z obszarów naszej witryny. Innymi słowy, zaczniemy „wypełniać” każdy z tych obszarów treścią, która ostatecznie zostanie umieszczona na naszej stronie internetowej. Zaleca się, aby nie rozpoczynać projektowania tych elementów przed pracą nad wireframe'em, ponieważ jest bardzo prawdopodobne, że jeśli zrobimy to w tej kolejności, później będziemy musieli zmodyfikować ich proporcje. Ryzykujemy zniekształcenie naszych obrazów i konieczność ponownego projektowania każdego z elementów, co będzie stratą czasu lub gorszą jakością.

W takim przypadku projekt naszej strony internetowej będzie niezwykle prosty. Będziemy używać zasady projektowania materiałów, ponieważ mamy zamiar używać logo Google jako przykładu tej praktyki. Muszę wyjaśnić, że celem tego samouczka jest zilustrowanie wiedzy technicznej, więc efekt estetyczny w tym przypadku nie ma znaczenia. Jak widać, stopniowo wypełnialiśmy przestrzeń wszystkimi obszarami, które wcześniej wyznaczyliśmy w naszym schemacie. Jednak w ostatniej chwili dokonaliśmy niewielkiej modyfikacji. Jak być może zauważyłeś, znacznie zmniejszyliśmy rozmiar naszego logo i umieściliśmy linię podziału w dolnym obszarze nagłówka, która doskonale łączy się z górnym menu. W tym przypadku użyliśmy przycisków i materiałów z banku zasobów. Jako projektanci możemy je zaprojektować samodzielnie (szczególnie ta opcja jest zalecana, jeśli chcemy, aby prezentował tonik bardzo podobny do tego, jaki prezentuje wizerunek marki lub logo).

Ważne jest, abyśmy pamiętali, że aby przedstawić ten przykład, będziemy pracować na dwóch różnych poziomach. Z jednej strony będziemy pracować nad obiektami, z drugiej nad wyglądem strony. Czyli z jednej strony w szkielecie naszej strony, az drugiej we wszystkich pływające elementy, które będzie wspierał ten szkielet. Zrozumiesz, że istnieją obszary, które w ogóle nie będą się unosić, takie jak obszar, który będzie zajmował nasz pasek boczny, przedstopek lub pasek rozdzielający, który oddziela nagłówek od ciała.

Struktury 1, 2, 3 i 4 będą częścią tło naszej strony internetowej, więc w rzeczywistości nie będzie konieczne eksportowanie jako takiej z programu Adobe Photoshop, chociaż możemy to zrobić, nie jest to konieczne. Jeśli chodzi o Płaskie kolory (jedna z podstawowych cech płaskiej konstrukcji i projektowania materiałów, można je doskonale zastosować za pomocą kodu wykorzystującego arkusz stylów CSS). Jednak pozostałe elementy muszą zostać zapisane do późniejszego wstawienia do naszego kodu HTML. Na tym małym diagramie odtworzyliśmy również obszary należące do tła strony, abyśmy mieli jasny obraz ostatecznego wyglądu naszej witryny.

Jak będziesz mógł sobie uświadomić, sensem tworzenia tego schematu w Adobe Photoshop jest uzyskanie rzeczywistego wymiaru każdego elementu oraz doprecyzowanie układu i struktury każdego elementu. Oczywiście treść tekstowa nie ma miejsca w tej fazie procesu, ponieważ musi być dostarczane z naszego edytora kodu. Należy również zwrócić uwagę, że w tej praktyce będziemy pracować z przyciskami i elementami statycznymi, chociaż generalnie są one stosowane z frameworków takich jak Bootstrap lub bezpośrednio z Jquery.

Po utworzeniu każdego z elementów, które będą składać się na naszą stronę internetową, czas zacząć je eksportować i zapisywać w folderze images znajdującym się w folderze projektu HTML. Ważne jest, aby przyzwyczaić się do eksportowania z modelu szkieletowego, ponieważ jest bardzo prawdopodobne, że będziesz musiał zmodyfikować niektóre oryginalne elementy w oparciu o konfigurację szkieletu. (Na przykład w tym przypadku zmieniliśmy rozmiar oryginalnych przycisków, logo i większości elementów wchodzących w skład kompozycji, w tym obrazy w dolnym obszarze).

Ważne jest, abyśmy nauczyli się zapisywać dowolne przedmioty niezależnie, aby zapisywać je w odpowiednich wymiarach i w precyzyjny sposób. Każdy błąd, nawet minimalny, może wpłynąć na wszystkie elementy, które są częścią Twojej strony internetowej. Należy pamiętać, że będą one ze sobą powiązane i muszą mieć idealne wymiary, aby można je było wprowadzić z HTML do końcowej sieci. W takim przypadku będziemy musieli niezależnie wyciąć i zapisać następujące elementy:

• Nasze logo.
• Wszystkie przyciski (te, które są częścią menu głównego i resztą).
• Wszystkie obrazy.

Możemy to zrobić na wiele sposobów i być może znajdziesz dla siebie bardziej efektywną alternatywę. Ale jeśli po raz pierwszy zamierzasz wykonać tego typu układ, zalecam przestrzeganie poniższych wskazówek.

• Najpierw musisz przejść do folderu, w którym znajduje się plik PSD zawierający nasz szkielet i powielić go tyle razy, ile elementów, które zamierzasz wyeksportować. W tym przypadku utworzyliśmy 12 kopii z oryginału i zapisaliśmy je w tym samym folderze. Następnie zmienisz nazwę każdej z kopii i przypiszesz każdej z nich nazwę elementu, który zawiera. Nazwy naszych 12 kopii zostanie zmienionych: Logo, przycisk menu 1, przycisk menu 2, pasek wyszukiwania, przycisk górny 1, przycisk górny 2, przycisk górny 3 i przycisk górny 4. Nazwy pozostałych czterech zostaną zmienione na: Obraz 1, Obraz 2, Zdjęcie 3 i Zdjęcie 4.
• Gdy to zrobisz, otworzymy plik z nazwą logo.
• Przejdziemy do naszej palety warstw i zlokalizujemy warstwę zawierającą nasze logo. Wtedy będziemy naciskać Ctrl / Cmd gdy klikamy miniaturę wspomnianej warstwy. W ten sposób logo zostanie wybrane automatycznie.
• Następnym krokiem będzie poinformowanie Photoshopa, że ​​chcemy, aby wyciął to logo w precyzyjny sposób. W tym celu będziemy musieli tylko wywołać narzędzie do przycinania z klawisza lub polecenia C.
• Gdy już to zrobimy, klikniemy nasz przycisk Enter, aby potwierdzić cięcie.
• Teraz przejdziemy do górnego menu Plik, aby kliknąć Zapisz jak. Wybierzemy nazwę, która w tym przypadku będzie brzmiała «Logo» i nadamy format PNGza to, że jest to plik oferujący najwyższą jakość w sieci.
• Powtórzymy proces ze wszystkimi kopiami i elementami. Po przycięciu upewnij się, że pozostałe warstwy z naszej palety są niewidoczny lub wyeliminowane. W ten sposób każdy element możemy zapisać na przezroczystym tle.

W tym przypadku wybieramy nasz przycisk menu 2 z palety warstw. Na zrzucie ekranu możesz zobaczyć, jak limity naszego przycisku zostały automatycznie wybrane.

Po wybraniu narzędzia do przycinania z klawisza C nasze płótno jest zredukowane tylko do wymiarów naszego przycisku.

Teraz jest czas na zapisanie po kolei wszystkich elementów, które są częścią naszej witryny i umieszczenie ich w folderze images, z których będziemy korzystać później. Będziemy wykonywać wywołania z naszego kodu i będziemy kontynuować nasz układ, ale od teraz z naszego edytora kodu.

Chociaż istnieje wiele narzędzi i alternatyw dla układu strony internetowej, które sprawiają, że proces jest całkowicie intuicyjny, bardzo ważne jest, aby nauczyć się to robić w podręcznik. W ten sposób dowiemy się, jakie są podstawy projektowania strony internetowej.

streszczenie:

1. Zaprojektuj struktura strony internetowej, zwracając szczególną uwagę na treści, które chcesz przekazywać oraz sekcje, które musisz utworzyć w swojej witrynie.
2. Pracuj nad swoim szkieletem lub wireframe z programu Adobe Photoshop, wskazując, w których obszarach zawartość będzie się pojawiać i ich format.
3. Opierając się na środkach i markach, które wcześniej opracowałeś, zacznij projekt powierzchni sieci. Zawiera wszystkie elementy (zarówno pływające, jak i stałe). Nie zapomnij dołączyć odpowiednich przycisków, logo i obrazów.
4. Wytnij po kolei wszystkie elementy wchodzące w skład projektu. Upewnij się, że mają odpowiednie środki i nie spowodują później problemów.
5. Zapisz wszystkie elementy w formacie PNG w folderze obrazów w folderze projektu HTML.
6. Pamiętaj, że ten projekt będzie miał wyjście do okna internetowego, więc bardzo ważne jest, aby wziąć pod uwagę tryb koloru i zastosować RGB.
7. Zainspiruj się innymi stronami internetowymi, które podziwiasz, zanim zaczniesz pracować, i nie zapomnij o tym porozmawiać z członkami zespołu. W przypadku, gdy jest to projekt dla klienta, staraj się trzymać odprawa tak daleko jak to możliwe.