Jak narysować stronę w Photoshopie

Jeśli chcesz utworzyć własną stronę internetową, dowiedz się, jak utworzyć witrynę w Photoshopie. Adobe Photoshop to edytor graficzny. Można w nim rysować układy i ich poszczególne elementy. Jest to dość długi i skomplikowany proces. Przez lata projektanci stron internetowych uczyli się projektowania szablonów i układania na nich stron internetowych. Ale każdy może uzyskać prosty układ. Potrzebna jest tylko podstawowa wiedza i fantazja Photoshopa.

W programie Photoshop można narysować prosty projekt strony internetowej nawet dla początkującego

Od początku nie jest możliwe uzyskanie strony takiej jak wzorcowe wzorce. Ale możesz narysować atrakcyjną i niewygodną usługę.

Treść

1 Niewiele na temat tworzenia witryn
2 Układ
3 Jak zmienić układ w plik HTML?
4 Konstruktorzy

Niewiele na temat tworzenia witryn

Dekodowanie niektórych terminów.

CSS (Cascading Style Sheets) i HTML (HyperText Markup Language) to języki komputerowe używane do tworzenia zasobów sieciowych. Jeśli otworzysz kod źródłowy dowolnej strony w Internecie, pojawią się tagi HTML.
Układ - układ i instalacja materiałów z układu, zamieniając go w szablon HTML. Zależy to od tego, jak obiekty są ułożone, czy wyglądają pięknie w całej kompozycji, czy wygodnie jest czytać tekst i tym podobne.
Warstwy są częścią układu. Razem tworzą duży obraz.Ale można je edytować i przenosić oddzielnie od siebie.
Ciało jest miejscem, w którym znajduje się treść. Może to być tło.
Frame (Frame) - element strony. Blok z pewnymi informacjami, zdjęciem, formularzem.

Stwórz oszałamiającą witrynę od podstaw, może być tylko profesjonalistą. Aby to zrobić, musisz zrozumieć projektowanie stron internetowych i znać HTML. Ponieważ gotowy układ musi nadal być kompetentnie skomponowany.

Ale są prostsze sposoby. Istnieją usługi i programy online, które automatycznie konwertują .psd (format pliku Photoshop) na HTML i CSS. Musisz tylko poprawnie złożyć szablon.

Aby korzystać z programu Photoshop, nie trzeba być artystą i zrozumieć wszystkich opcji programu. Ale jeśli po raz pierwszy uruchomiłeś go i nie wiesz, jak wstawić tekst, narysuj kształt geometryczny, zduplikuj warstwę, zmień kolor lub wybierz dowolny obszar, zacznij od czegoś prostszego. Aby utworzyć układ w Photoshopie, musisz mieć przynajmniej początkowe umiejętności w pracy z narzędziem i zrozumienie podstawowych funkcji (jak narysować linię, umieścić przewodnik, wybrać czcionkę i tym podobne).

Użyteczne są również ogólne informacje o usługach sieciowych. Witryna może charakteryzować się następującymi kryteriami:

Jedna strona.Wszystkie elementy, treść, cała zawartość zasobu jest w jednym miejscu. Na jednej stronie. Aby wyświetlić zawartość usługi, nie klikaj linków ani nie otwieraj nowych kart. W tym samym czasie sama strona może być dowolnie duża. Pasuje zarówno do małej broszury reklamowej, jak i ogromnej powieści zawierającej 600 stron.
Multipage. W związku z tym obejmuje wiele stron. Mogą to być na przykład "Strona główna", "Forum", "Księga gości", "Odpowiedzi na najczęściej zadawane pytania", "Kontakty". Dla każdego z nich musisz zrobić układ. Będziesz także potrzebował nawigacji i mapy witryny: osobnej sekcji z linkami do wszystkich części serwisu. Aby użytkownik mógł szybko znaleźć zakładkę, której potrzebuje.
"Guma". Zmienia rozmiar w zależności od rozdzielczości ekranu. Rozciągnięty wraz z oknem przeglądarki. Musimy z góry obliczyć, jak będzie wyglądać strona. Jeśli przy szerokości 1300 wszystko jest wyświetlane normalnie, to w 900 pikselach część artykułu może "przejść" poza ramkę, obrazy nie staną się tak, jak powinny, a animacja flashowa zamknie formularz do wprowadzania.
Naprawiono Treść strony nie zmienia rozmiaru. Najprostsza i najbardziej praktyczna opcja. Aby strona wyglądała na solidną, a podczas rozszerzania okna nie było "pustej" przestrzeni wzdłuż krawędzi, można zrobić gumowe tło.

Układ

Najpierw zdecyduj, jaki projekt potrzebujesz.Nie wystarczy po prostu "wyobrazić" sobie, a potem zorganizować w Photoshopie. Musi być wyraźny widok. Narysuj wzór na zwykłym papierze. Nie trzeba przerysowywać każdego zdjęcia. Wystarczający schemat: kilka prostokątów i kół, które w sposób konwencjonalny oznaczają elementy strony internetowej. Zastanów się, w jaki sposób zostaną umieszczone ramki, gdzie lepiej umieścić logo, gdzie umieścić informacje dla odwiedzających.

Zobacz przykłady stron w Internecie. Zastanów się, które lubisz i dlaczego. Wygodne, czy to lokalizacja ramek, ładne kolory czy ciekawe podejście do projektu. Skopiuj czyjś projekt nie jest tego wart. Wystarczy czerpać inspirację z tego. Następnie możesz dowiedzieć się, jak narysować witrynę w Photoshopie.

Utwórz nowy dokument (Plik - Nowy). Wymiary są wybierane za pomocą obliczeń na małych monitorach lub niskiej rozdzielczości: 1024 × 720 pikseli. Jest to szerokość części "informacji", a nie całego obrazu. Jeśli chcesz stronę o wielkości 1100 pikseli, musisz zrobić dokument o szerokości 1300 pikseli. Długość w rzeczywistości nie jest ustalona - zależy to od tego, ile treści chcesz umieścić w zasobach. Są to zalecenia, a nie reguły. Możesz zbudować duży układ, jeśli chcesz.
Włącz linijkę. Naciśnij Ctrl + R lub przejdź do menu Widok - Linijki. To jest skala pomiarowa. Pojawia się poza obrazem. Bez tego musisz określić rozmiar i odległość "oko", co nie wpływa zbyt dobrze na końcowy wynik. Możesz skonfigurować tę funkcję w menu Edycja - Ustawienia - Jednostki miary i Miarki. Tam lepiej jest zmieniać centymetry na piksel, aby pracować z jednym parametrem i nie obliczać, ile punktów ma jeden cal.
Powinieneś także aktywować siatkę. Widok - Pokaż - Siatka lub Ctrl + E (możesz również wyłączyć). Jest to rodzaj analogu notebooka w klatce. W programie Photoshop zostaną wyświetlone linie pionowe i poziome. Nie pojawią się na samym rysunku. Można je zobaczyć tylko podczas edycji. Ta funkcja jest potrzebna do równomiernego rozmieszczenia elementów szablonu. Ktoś wygodniejszy w pracy z siatką, ktoś bez niego. Najlepiej go włączyć, jeśli tworzysz witrynę po raz pierwszy.
Aby go skonfigurować, przejdź do Edycja - Ustawienia - Przewodniki, siatki i fragmenty. Tam możesz wybrać rozmiar komórek, a także kolor i typ linii (bryły, kropek, kropek).

Przykład nowoczesnego projektu strony internetowej

Zainstaluj prowadnice.Pomiędzy nimi będzie główny zasób treści - stała część witryny. A za nimi - gumowe tło. Aby to zrobić, kliknij opcję Widok - Nowy przewodnik. W polu "Orientacja" zaznacz "Pionowo". W polu "Pozycja" wpisz odległość między obiektem a lewą krawędzią. Skoncentruj się na skali linijki.
Potrzebujemy dwóch przewodników - po prawej i lewej stronie treści strony. Odległość między nimi powinna wynosić maksymalnie 1003 piksele dla wyświetlaczy o rozdzielczości 1024 × 720. Możesz określić inną szerokość. Ale duże zasoby są niewygodne do oglądania na małych monitorach.
Dlaczego 1003, a nie 1024? Jeśli witryna musi przewinąć w dół ("przewiń") w dół, przeglądarka będzie miała pionowy suwak do przewijania. Rozmiar tego suwaka to około 21 pikseli. Jeśli go nie weźmiesz, pojawi się poziomy przewijak. A odwiedzający zasoby będzie musiał przesunąć stronę w lewo i w prawo, aby wyświetlić wszystkie informacje.
Ciało powinno znajdować się pośrodku płótna.

Są to wstępne etapy prac. Sposób tworzenia układu w Photoshopie zależy od Twojej wyobraźni i gustu. Dlatego dalsze będą jedynie ogólne zalecenia o charakterze technicznym.

Po pierwsze, twój układ potrzebuje tła.Można go wykonać samodzielnie lub pobrać z sieci. Jest wiele zasobów z darmowymi teksturami. Nie umieszczaj na stronie zdjęć chronionych prawem autorskim. Nie bierz jasnego lub kontrastowego tła. Lepiej nie używać tekstur z dużą ilością małych, przyciągających wzrok detali. Będą odwracać uwagę gościa od treści strony.
Jeśli po prostu otworzysz rysunek w Photoshopie, pojawi się on na nowej karcie i nie zostanie dodany do układu. Zaznacz całe tło. Aby to zrobić, potrzebujesz skrótu klawiaturowego Ctrl + A lub narzędzia Zaznaczanie (znajduje się on na lewym panelu). Skopiuj go i wklej do szablonu.
Ta opcja jest również dostępna po kliknięciu Edytuj - Wklej.

Nowa warstwa pojawi się na liście w prawym dolnym rogu. Kliknij na nim prawym przyciskiem myszy, aby zobaczyć możliwe działania. W menu "Opcje warstwy" możesz zmienić jego nazwę. W "Ustawieniach nakładki" znajdują się podstawowe ustawienia obrazu. Możesz sprawić, że będzie jarzyć, wyrzeźbić, połysk, obrys, gradient. Jeśli wybierzesz opcję, zmiany pojawią się natychmiast w Photoshopie. Istnieje zestaw gotowych stylów. Dzięki standardowej fakturze powstają oryginalne rozwiązania projektowe. I nie rysuj niczego więcej.
Przycisk "Filtry" znajduje się na pasku menu. Znajdziesz tam różnorodne imitacje (pastel, akwarela, ołówki), stylizacje, tekstury, szkice, światła, rozmycie.
Możesz wybrać zwykłe tło. Kolor zależy od osobistych preferencji. Ale lepiej nie czynić go czarnym lub trującym. Odpowiednia pościel i miękkie kolory lub przeźroczyste zimno (na przykład jasnoszary, jasnoniebieski).
Po teksturach możesz zebrać samą stronę. Tutaj masz swobodę tworzenia.
Aby dodać kształt (linia, kwadrat, owal), kliknij odpowiedni przycisk po prawej stronie. Będzie miał wygląd i nazwę obiektu, który jest aktualnie wybrany do rysowania. Na przykład narzędzie Elipsa, narzędzie Polygon. W programie Photoshop liczba kształtów jest ograniczona. Można je jednak znaleźć w Internecie, pobrać i zainstalować za pomocą menu Edycja - Ustaw zarządzanie. W polu "Typ" określ, która kolekcja ładowanych obiektów.
W różnych wersjach programu liczby te są wywoływane na różne sposoby. Albo przycisk w postaci małego czarnego trójkąta (jest po prawej), albo ikona w postaci koła zębatego, albo element "Kształt kropki" (znajduje się pod paskiem menu). Obiekty można łączyć, grupować, tworzyć z nich kompozycje.
Aby utworzyć ramkę tekstową, kliknij przycisk w formie wielkiej litery "T". Następnie wybierz miejsce, w którym powinny znajdować się symbole, kliknij tam i wpisz to, czego potrzebujesz.
Każdy element lepiej jest umieścić na osobnej warstwie. Dlatego wygodniej będzie przenosić i edytować, bez "dotykania" całej witryny. Aby dodać ten obiekt, przejdź do Warstwy - Nowy.

Aby wyświetlić obraz we wstępnie wybranym obszarze, najpierw wybierz go, a następnie otwórz Edycja - Wklej specjalnie. Będą dostępne opcje "Wklej zamiast" i "Wklej na zewnątrz".
Możesz przenieść część jednego obrazu do nowej warstwy. Aby to zrobić, zaznacz go, kliknij prawym przyciskiem myszy i wybierz "Wytnij do nowej warstwy".
Na rysunkach, napisach i obrazach dostępne są te same opcje, co w przypadku tła: efekty, filtry i tak dalej.
W Photoshopie wciąż jest wiele narzędzi do rysowania: pędzle, długopisy, ołówki.

Możesz stworzyć wysokiej jakości zasoby nawet z prostych obiektów geometrycznych.

Są zasoby z darmowymi układami. Załaduj je do Photoshopa i edytuj w razie potrzeby. Jest to łatwiejsze i szybsze niż rysowanie od zera.

Jak zmienić układ w plik HTML?

Wymyśliłeś, jak stworzyć witrynę w Photoshopie i zaprojektowałeś swój pierwszy układ.Co dalej? W końcu nie może po prostu przesłać do hostingu.

Można go podać koderowi, który przygotuje wysokiej jakości szablon html. Ale jest inna opcja. Skorzystaj z usług, aby przekonwertować plik PSD na HTML i CSS.

Konwerter Psd2Html. Płatna usługa online. Szybko przekonwertuj format Photoshopa na szablon strony. Dzięki temu zasobowi, nawet z kiepskiej jakości, możesz stworzyć porządną stronę.
HTML Panda.
PSDCenter
40 naliczonych dolarów.

Konstruktorzy

Układy można również zbierać na specjalnych stronach. Zwykle jest przejrzysty i intuicyjny interfejs. Po prostu montujesz szablon z różnych części. Niektóre elementy najlepiej narysować w Photoshopie. Otrzymasz oryginalny projekt. Pomimo tego, że został stworzony na konstruktorze.

W Photoshopie nie tylko rysuj. Zbiera układy witryn. W większości przypadków robi to mistrzowie. Ale prosty szablon może zrobić każdą osobę. Potrzebna jest tylko podstawowa wiedza o Photoshopie.