W sieci istnieje ogromna liczba szablonów stron internetowych, ale mają one jedną wadę - nie są unikalne. Jeśli właściciel witryny nie chce, aby projekt jego witryny powtarzał się gdzie indziej, może zamówić szablon u profesjonalnego projektanta lub spróbować go stworzyć samodzielnie.
Czy to jest to konieczne
Program Adobe Photoshop
Instrukcje
Krok 1
Tworzenie własnego szablonu nie jest tak trudnym zadaniem, jak mogłoby się wydawać na pierwszy rzut oka. Do pracy potrzebujesz Adobe Photoshop - oczywiście musisz mieć przynajmniej podstawową wiedzę na temat pracy z nim. Ale zanim uruchomisz program i zaczniesz tworzyć, musisz wcześniej przemyśleć przyszły projekt. Najwygodniejszym sposobem na to jest najpierw zapoznanie się z co najmniej setką gotowych szablonów, ocena ich zalet i wad. Zwróć uwagę na udane rozwiązania niektórych elementów projektu. Nie oznacza to, że będziesz je kopiował, ale całkiem rozsądne jest oparcie się na pięknych i wygodnych rozwiązaniach.
Krok 2
Na podstawie analizy szablonów innych osób oraz własnej kreatywności powinieneś zorientować się, jak będzie wyglądać Twoja strona. Zgrubne szkice przyszłego projektu najlepiej wykonywać za pomocą kolorowych ołówków na zwykłych arkuszach A4. Powinieneś rozpocząć pracę z Photoshopem dopiero wtedy, gdy masz jasne pojęcie o tym, co dokładnie zamierzasz narysować.
Krok 3
Uruchom Photoshopa, utwórz nowy projekt 1200x1600, ustaw przezroczyste tło. Włącz narzędzie Linijka, jeśli jeszcze nie jest włączone, w tym celu naciśnij kombinację klawiszy Ctrl + R. Włącz przyciąganie: Widok - Przyciąganie.
Krok 4
Teraz musimy podzielić szablon za pomocą prowadnic, które pokażą granice jego elementów - boków, kolumn itp. Na przykład chcesz podzielić szablon tak, aby po lewej stronie znajdowała się wąska kolumna, po prawej stronie szeroka kolumna, a u góry było miejsce na nagłówek. Oznacza to, że potrzebne są trzy pionowe linie (lewa granica szablonu, prawa i linia między nimi) oraz pozioma, pokazująca dolną granicę nagłówka. Aby ustawić linię pionową, przesuń kursor na lewą linijkę po lewej stronie, naciśnij V i trzymając wciśnięty klawisz przeciągnij linię w żądane miejsce. Zrób to samo z pozostałymi dwoma pionowymi liniami. Poziome są zbudowane w ten sam sposób, używana jest tylko górna linijka.
Krok 5
Znajdź tło dla swojego szablonu, powinien to być mały, powtarzający się wzór. Otwórz go w Photoshopie, wybierz, skopiuj. Następnie wklej do szablonu tyle razy, ile potrzebujesz, aby wypełnić go tłem. Wklejanie odbywa się w następujący sposób: „Edytuj” - „Wklej”, a następnie przeciągnij obszar tła do żądanej lokalizacji. Jeszcze szybciej można wstawić obraz za pomocą polecenia Ctrl + V. W ten sam sposób dodaj tło dla nagłówka witryny. Do utworzenia tła można użyć różnych wypełnień gradientowych.
Krok 6
Za pomocą narzędzia Ołówek narysuj granice szablonu, koncentrując się na już narysowanych liniach (czyli na nich). Otrzymałeś podstawę najprostszego szablonu, teraz musisz uzupełnić go o niezbędne szczegóły - przyciski nawigacyjne, linie menu, różne elementy dekoracyjne itp. Aby uzyskać więcej informacji na temat tworzenia przycisków i innych elementów, przeczytaj odpowiednie artykuły dotyczące pracy z programem Adobe Photoshop.
Krok 7
Szablon jest tworzony, teraz trzeba go pokroić na kawałki, aby wstawić je na stronę html. Użyj narzędzia Slice do cięcia. Aby go znaleźć, kliknij prawym przyciskiem myszy narzędzie Ramka i wybierz Wycięcie z menu, które się otworzy. Teraz możesz zagnieździć szablon według potrzeb, a następnie zapisać: „Plik” - „Zapisz dla Internetu”. W oknie, które zostanie otwarte, wybierz typ pliku: HTML i obrazy, określ nazwę pliku: index.htm i zapisz go. Będziesz mieć plik index.htm i folder obrazów z pociętymi obrazami.
