Tworzenie czystego układu strony internetowej w Photoshopie-Projektowanie układu strony internetowej to coś więcej niż układanie kolorowych obrazów i wypełnianie tekstu w ramkach tekstowych. Jest to podejście, które mówi wiele o działalności Twojego klienta. Kolorystyka i grafika serwisu definiują charakter działalności, natomiast jakość projektu i łatwość poruszania się po serwisie powinny związać użytkownika z organizacją i przekształcić go w potencjalnego klienta.
zaprojektowanie dobrze wyglądającego i łatwo dostępnego layoutu strony internetowej jest obowiązkowe dla każdego projektanta stron internetowych. Ten poradnik ma na celu przeprowadzi Cię przez proces tworzenia układu strony internetowej proste i czyste strony internetowej od podstaw. Podczas procesu poznasz ważne punkty, które pomogą Ci zdobyć więcej wiedzy na temat projektowania stron internetowych.
Napisz swoje wymagania przed zaprojektowaniem layoutu strony.
zanim zaczniesz projektować layout strony, powinieneś wiedzieć, jak będzie wyglądała Twoja strona i jakie tematy powinieneś zawrzeć na stronie. Ważne jest, aby sporządzić listę elementów układu strony internetowej, których potrzebuje klient na swojej stronie internetowej. Wraz z tym, jakość dobrego projektanta jest przygotowanie makiety całej strony internetowej, zanim zacznie pracować nad ostatecznym szablonem.
rozpocznij bezpłatny Kurs projektowania
Animacja 3D, modelowanie, symulacja, Tworzenie gier & Pozostałe
różne firmy projektowe dostosowują różne poziomy strategii wstępnego projektowania, które mogą zawierać ramy drutu, prototypowanie, makietę, wersje beta i wiele innych. W tym samouczku stworzymy wersję makiety przed uruchomieniem oryginalnego projektu szablonu. Używam odcieni szarości, które umożliwiają identyfikację bloku makiety.
Canvas
lata wcześniej, podczas gdy system operacyjny i ograniczone urządzenia miały dostęp do stron internetowych, wymiary strony zostały ustalone na jeden lub dwa rozmiary. Dziś scenariusz jest zupełnie inny. Użytkownicy końcowi uzyskują dostęp do witryn na komputerach stacjonarnych o różnych rozmiarach, telefonach komórkowych, iPadach i tabletach. Nie ma szans, aby Twoja strona internetowa była dostosowana do konkretnego rozmiaru w tej zróżnicowanej sytuacji. Ale istnieje kilka standardowych rozmiarów stosowanych dla każdego urządzenia. Powoli znajdziesz swój ulubiony rozmiar lub twój Klient może polecić ci stronę internetową, aby naśladować rozmiary.
w tym przypadku pracujemy nad następującymi wymiarami. Nie martw się o wysokość, jak to będzie się zmieniać w czasie. Im więcej treści dodajesz do swojej witryny, tym większa będzie wysokość.
pamiętaj, że często przewija się stronę w dół pionowo, więc nie możesz ustawić określonej wysokości dla swojej strony internetowej, chyba że nie chcesz, aby użytkownik przewijał stronę główną jako Google. Ale konieczne jest, aby nie przewijać w poziomie. Ogranicz szerokość zgodnie ze standardami branżowymi i nie bądź kreatywny dzięki poziomemu przewijaniu.
dla sieci rozdzielczość jest ograniczona do 72. Istnieją obrazy o wyższej rozdzielczości i strony znalezione ostatnio na iPadach i kilku tabletach. Ale jest to rzadka okazja i lepiej trzymać się 72, biorąc pod uwagę szybkość internetu na całym świecie.
zaznacz pliki za pomocą polecenia Ctrl+A i narysuj linie pomocnicze równo w całym szablonie. Strona internetowa powinna być starannie zorganizowana z każdym elementem ułożonym spójnie ze sobą. A wytyczne dotyczące układu strony internetowej pomogą Ci go łatwo uzyskać.
przygotuj makietę.
umieszczenie pliku makiety na oryginalnym szablonie pomaga zaoszczędzić dużo czasu. Projektowanie witryny staje się tak proste, że w ciągu kilku minut ukończysz framework. Jednak makieta pomoże Ci tylko zaprojektować ramki. Uzupełnienie elementów projektu o szczegóły, układ typu i wyrównanie zajmie więcej czasu niż narysowanie layoutu strony internetowej.
schemat kolorów i inne opcje
następną rzeczą po przygotowaniu frameworka jest wybór schematu kolorów. Ale lepiej przygotować Kolory przed rozpoczęciem pracy nad projektem.
wszystko sprowadza się do komunikatu, że przygotujcie broń przed rozpoczęciem projektowania. Wszystko, w tym ikony, obrazy i opcje kolorów, powinny być gotowe przed rozpoczęciem pracy. Organizowanie i planowanie pracy pozwoli zaoszczędzić więcej czasu i skoncentruje się na projektowaniu bez przeszkód.
wybór kolorów może być wyborem projektanta, jeśli firma jest nowa i nie ma wcześniej identyfikacji wizualnej. Klienci dają wyobrażenie o tym, jakie odcienie chcą, aby logo lub tło było w niektórych przypadkach. W przypadku istniejących firm, w których może być konieczne przeprojektowanie całej strony internetowej, być może będziesz musiał wybrać te same kolory, jak na potrzeby klienta.
istnieje wiele stron internetowych, które mogą pomóc Ci wybrać miliony schematów kolorów z archiwów. Wypróbuj następujące strony internetowe, aby cieszyć się szerokim wyborem kombinacji kolorów.
Kolor.adobe.kom
Colourlovers.com
tutaj wybrałem kilka odcieni niebieskiego do wykorzystania na stronie internetowej. Cała strona internetowa zostanie zaplanowana w następującej kolorystyce. Nie zapomnij wybrać trzech lub czterech różnych kombinacji kolorów, ponieważ nie wiemy, który kolor preferuje klient. Gdy klient sfinalizuje schemat kolorów, Zapisz wartości odcieni i upewnij się, że kolory odgrywają istotną rolę w każdym pionie organizacji, zwłaszcza w identyfikacji wizualnej.
proces projektowania
istnieje wiele sposobów na kontynuowanie swoich projektantów. Nie ma twardych i szybkich zasad układu strony do zdefiniowania lub śledzenia procesu projektowania; jest to głównie proces, który projektant wybierze dla swojej wygody.
niektórzy projektanci chcą zbudować całe bloki i ramki i rozpocząć pracę nad szczegółami w drugim etapie, po którym następuje Typ, A na końcu wyrównania i korekty. Niektórzy lubią kończyć jedną część strony za jednym razem i przenosić ją do następnej części. Podążamy za drugim stylem.
zakończymy stronę w następujących krokach
- nagłówek & Stopka
- co robimy
- usługi
- formularz
- Aktualności
- Stopka
nagłówek & stopka
zasada określająca wymiary nagłówka lub banera pozostaje w gestii Twojej kreatywności. Zgodnie z najnowszymi trendami strony internetowe pojawiają się z ogromnym obrazem, który pokrywa cały ekran komputera. Styl jest określany jako obraz bohatera, który stał się dość popularny w ostatnim czasie.
w tym przypadku zaczęliśmy od nagłówka o wysokości 120 pikseli i wysokości 550 pikseli dla banera. Szerokość powinna być zgodna z rozmiarem dokumentu.
projekty z jednolitym kolorem mają płaski wygląd, który nie pasuje do większych ramek lub obrazów. Aby uniknąć płaskiego wyglądu, nałożyłem warstwę gradientową na baner. Nadaje banerowi głębię, która powoli przekształca się z jednego odcienia w drugi.
następnie zaczęliśmy importować Logo i umieścić je w lewym górnym rogu nagłówka, a kolejne większe logo na środku banera. Możesz również obserwować kształty wektorowe układu strony internetowej w prawym górnym rogu, które są używane do udostępniania linków do mediów społecznościowych.
na tym etapie zakończyłem dodawanie typu w części nagłówka & banera. Nazwa firmy, Wiadomość marki, linki i usługi są dodawane w tekście. Możesz również obserwować przezroczysty przycisk na banerze.
zwykły tekst lub zbyt duży typ bez specjalnych funkcji zepsuje wygląd twojej strony internetowej; strona wkrótce zanudzi użytkownika, co może pozwolić mu szybko opuścić Twoją witrynę. Sprawdź kształt wektorowy, który dodałem do linków usług w prawym górnym rogu banera. Styl jest prosty, ale wypełnia pustkę unikając przyziemnego wyglądu.
Wybierz obraz odpowiedni dla firmy. W Internecie dostępne są miliony obrazów stockowych, a znalezienie obrazu, który pasuje do Twoich wymagań, nie zajmie zbyt wiele czasu.
w moim przypadku znalazłem wysokiej jakości obraz, który myślę, że będzie dobrze pasował do mojej strony internetowej. Nie mam motywu biznesowego dla strony internetowej, więc mogę wybrać dowolny obraz, który dobrze wygląda na banerze.
spróbuj pobrać niektóre obrazy HD z bezpłatnych witryn z obrazami stockowymi podanymi poniżej
www..com.
mieszanie to sztuka, którą powinieneś opanować, aby produkować piękne banery. Tutaj wymieszałem trzy warstwy, aby uzyskać efekt pokazany na powyższym zdjęciu. Oto, co zrobiłem
- umieść warstwę obrazu na niebieskim banerze koloru
- umieść nakładkę gradientu nad obrazem
- Zmień krycie obrazu na 40 procent i zmień tryb mieszania na różnicę.
- Sprawdź paletę warstw na powyższym obrazku, aby zrozumieć, w jaki sposób warstwy są ułożone jedna na drugiej.
tak będzie wyglądał Twój nagłówek & Banner po zakończeniu pracy nad nim. Pracujemy nad jedną częścią na raz i nadszedł czas, aby przejść do następnego poziomu.
wyrównanie jest kluczowe, jeśli chodzi o Typ; dowiedz się, jak powinna wyglądać Twoja witryna, a tekst powinien być wyrównany przed jej uruchomieniem. Na tym poziomie użyłem dwóch różnych ramek tekstowych, obie wyrównane do lewej.
następnym krokiem jest zaprojektowanie części usługowej strony internetowej. Zaprojektowałem metaliczną gwiazdę w odcieniach szarości, aby zaprezentować różne usługi firmy. Intencją używania symbolu gwiazdy jest 5-gwiazdkowe usługi.
jeśli chodzi o wyrównywanie tekstu, Przewodniki są twoimi najlepszymi przyjaciółmi. Spójność w obrębie typu i obiektów można uzyskać poprzez dobre wykorzystanie przestrzeni białej i równych odstępów między elementami projektu. Użyłem wielu wskazówek dotyczących układu strony, aby zobaczyć, że wszystkie obiekty w ramce powinny zachować odpowiednie luki i odległości, które wydobywają sporą ilość białej przestrzeni.
kolejnym krokiem naszego projektu jest utworzenie pola formularza. W tym przypadku pracuję odwrotnie niż metoda, którą zastosowaliśmy przy projektowaniu banera. Umieścimy warstwę obrazu pod warstwą o jednolitym kolorze i zastosujemy warstwę gradientu na dwóch warstwach, aby uzyskać lepszy wygląd. Zabawa w tryby mieszania jest zawsze niezbędna podczas umieszczania większych obrazów.
Myślę, że ten obraz pomoże stronie wyglądać lepiej.
umieść obrazek pod kolorową warstwą tła. Aby dopasować obraz dokładnie do rozmiaru kolorowej warstwy, użyj opcji maskowania warstwy.
spójrz na paletę warstw na powyższym obrazku. Warstwa o jednolitym niebieskim kolorze znajduje się na górze obrazu, tryb mieszania jest konwertowany na nakładkę, a krycie zmniejsza się do 65 procent.
użyłem mapy gradientu na górze dwóch warstw. Tryb mieszania zostaje zmieniony na odcień, a krycie pozostaje takie samo.
pudełko formularza jest gotowe, co prowadzi nas do końca czwartego poziomu w naszym projektowaniu strony internetowej.
nasz następny poziom składa się z dwóch prostych ramek tekstowych. Przypomina drugi poziom strony, a ja użyłem wyrównanych dwóch pól podobnych do góry. Utrzymanie spójności w wyrównaniu jest dobrym sposobem wykorzystania białej przestrzeni.
gdy dotarliśmy do ostatniej części strony, nadszedł czas, aby ponownie przyjrzeć się wymiarom stopki. Projektant musi zaplanować Wysokość stopki na podstawie linków, z których powinien korzystać. W tym przypadku podałem wysokość 170 pikseli do mojej stopki. Szerokość pozostaje taka sama jak na stronie internetowej.
umieść linki i obrazy zgodnie z wymaganiami.
tym zakończyliśmy projektową część naszej strony internetowej. Użyte kombinacje kolorów są minimalne; wykorzystujemy dużo białej przestrzeni w naszym projekcie i dodajemy prosty tekst z minimalnymi czcionkami. Intencją jest zaprojektowanie czystej strony internetowej, która mamy nadzieję zostanie spełniona.
Proszę jeszcze raz spojrzeć na wygląd całej strony poniżej.
