7 Porady dotyczące Photoshopa w zakresie projektowania czystych i nowoczesnych stron internetowych
Czyste, eleganckie i piękne projektowanie stron internetowych jest często kwestią osobistej perspektywy. Oglądam setki stron internetowych każdego tygodnia, a kilka z nich wyróżnia mnie, ale nie wszystkie z nich są skuteczne.
Zbyt często projektanci gotują koncepcję zbyt daleko, tworząc ostateczny projekt, który jest niczym więcej niż tekstem i siatką. Chociaż te minimalne projekty mają swój estetyczny wygląd, szczególnie w połączeniu ze znakomitą typografią, ryzykują, że nie będą zauważać.
Niezależnie od osobistych opinii, istnieją pewne cechy projektu, które pozwalają z dumą określić go jako czysty lub nowoczesny i zwiększyć jego użyteczność i sympatię na uniwersalnym poziomie. Prostota nie jest trendem projektowym, ale raczej atrybutem dobrego projektu.
Photoshop zapewnia nam wszechstronny zestaw narzędzi do tworzenia głębi i zainteresowania, i zaprasza nas do zintegrowania subtelnych szczegółów, w których zostawimy puste miejsce. Wystarczy garść tych narzędzi, aby wlać jakość nowoczesnego wzornictwa do układu. Poprzez ich opanowanie możesz tworzyć czyste projekty, które wyrażają funkcjonalność w sposób jasny i efektywny.
1. Przestrzeń
Biała przestrzeń pozwala na wizualną separację elementów projektu bez użycia pudełek, linii lub dodatkowej grafiki i jest prawdopodobnie najważniejszym aspektem nowoczesnego wzornictwa. Jest niezbędny do prezentacji treści i czytelności. W przypadku prawidłowego użycia biała przestrzeń nadaje Twojemu układowi czysty i elegancki wygląd.
Przewodniki i siatki są dostępne w Photoshopie, aby pomóc precyzyjnie pozycjonować elementy. Siatka pokrywa cały dokument, a prowadnice można ustawiać ręcznie. Użyj wytycznych wcześnie, aby ustawić niewidoczne krawędzie, marginesy i wypełnienie używane do zdefiniowania białej przestrzeni.
Utwórz przewodnik, naciskając Ctrl + R (Win) lub Cmd + R (Mac), aby włączyć linijkę, a następnie kliknij górną lub lewą linijkę, aby przeciągnąć prowadnicę do wybranej pozycji. Oto kilka dodatkowych skrótów ułatwiających zarządzanie przewodnikami podczas pracy:
- Aby przenieść prowadnicę: Ctrl (Win) lub Cmd (Mac) i kliknij przewodnik
- Pokaż / ukryj linie pomocnicze: naciśnij Ctrl +; (Win) lub Cmd +; (Prochowiec)
- Pokaż / Ukryj siatkę: naciśnij Ctrl + "(Win) lub Cmd +" (Mac)
Włącz inteligentne linie pomocnicze w menu Widok> Pokaż> Inteligentne linie pomocnicze . Inteligentne linie pomocnicze pojawiają się automatycznie po narysowaniu kształtu, wyrównywaniu tekstu lub utworzeniu zaznaczenia lub slajdu, co pozwoli zaoszczędzić czas na przygotowanie wytycznych dla tych elementów.
Wyrównanie obiektów za pomocą prowadnic i siatek ułatwia projektowanie i zapewnia ogólny wygląd.
2. Głębokość
Głębia stworzona za pomocą światła i cienia sprawia, że twoje elementy wydają się wyraźne i prawdziwe. Efekty cieni mogą być stosowane do dowolnego obiektu, zaznaczenia lub warstwy tekstowej, ale wystarczy wybrać kolor pasujący do tła i zrezygnować z domyślnej czerni.
Nie wszystkie cienie muszą być ciemne. Połącz efekt cienia wewnętrznego z białym lub jasnym cieniem, aby stworzyć wrażenie "zapadniętego" lub "typowego" z tekstem lub polami formularzy.
3. Szczegóły
Zarówno narzędzie gradientowe, jak i efekty warstw gradientowych odgrywają dużą rolę w czystym i nowoczesnym designie. Gradienty są obecne w każdym aspekcie nowoczesnej stylistyki, od cieni i świateł, po tła i przyciski.
Aby uzyskać dostęp do narzędzia gradientowego, naciśnij Shift + G. Aby utworzyć gradient, kliknij obszar roboczy, przeciągnij i zwolnij. To narzędzie najlepiej nadaje się do dużych obszarów, takich jak tła, światła lub cienie promieniowe. Podczas pracy z poszczególnymi elementami, takimi jak sekcje, przyciski lub ikony, efekt warstwy nakładki gradientowej jest skuteczniejszym sposobem ustalania stylów lub tekstur powierzchni. To narzędzie jest dostępne po dwukrotnym kliknięciu warstwy elementu i zaznaczeniu pola "Gradient Overlay".
Użyj tego efektu, aby nadać subtelnemu wymiarowi przyciski i paski nawigacyjne lub naśladować styl i fakturę papieru lub metali.
4. Definicja
Przez nadmierne definiowanie krawędzi i granic gwarantujesz, że twoje elementy mają odpowiedni kontrast.
Efekt warstwy obrysu określi elementy, takie jak tekst lub przyciski, w których potrzebny jest równie wyrównany kontur ze wszystkich stron. Użycie tego efektu zwolni cienie wewnętrzne i cienie, aby rozszerzyć opcje.
Kuszące jest sięganie po narzędzie pióra do rysowania linii prostych i reguł poziomych, ale jeśli chcesz zastosować gradienty lub cienie do linii, łatwiej jest użyć narzędzia jednokolumnowego, które jest dyskretnie ukryte za narzędziem do prostokątnego namiotu . Użyj narzędzia Jednorzędowa na nowej warstwie i białego lub jasnego cienia, aby utworzyć linie podświetlenia wzdłuż krawędzi lub separatorów, w których nie można zastosować efektu do samego elementu.
5. Odsetki
Czystość i nowoczesność nie muszą być nudne, białe lub minimalne. Sprytne zastosowanie tekstury i wzoru sprawi, że Twój projekt będzie wyróżniał się, komunikując styl i markę. Zastosuj subtelne techniki, takie jak dodanie szumu (Filtr> Dodaj szum) lub efekt warstwy nakładki teksturowania na obszarach tła lub elementach interfejsu, aby ułatwić ich rozdzielenie. Im bardziej rzeczywisty i przejrzysty element pojawia się, tym bardziej przyciąga widza.
6. Perspektywa
Perspektywa to najbardziej nieużywana technika w nowoczesnym projektowaniu stron internetowych, ponieważ bieżące trendy koncentrują się konsekwentnie na symetrii i siatkach. Stosując perspektywę do obrazów i elementów w projekcie, możesz wprowadzić głębię, wymiar, modernizm i zainteresowanie swoim projektem w jednym prostym kroku.
Perspektywie można nadać dowolny kształt lub obraz, wybierając opcję "Bezpłatna transformacja ścieżki" w menu prawym przyciskiem myszy i klikając przycisk "Wypaczenie" znajdujący się na pasku opcji narzędzia.
Złudzenie perspektywy można również uzyskać, tworząc asymetryczne kształty lub ramki i stosując gradienty i cienie odpowiednio, aby rozdzielić obiekty.
7. Czytelność
Silny typ jest bardzo lubiany przez społeczność projektantów i jeszcze mocniejszy składnik czystego projektu. Może zastąpić obrazy i grafikę, które w przeciwnym razie mogą nadmiernie komplikować projekt i przekazać całą istotę powyższych technik w prosty i bezpośredni sposób.
Aby dodać tekstury do tekstu, najpierw przekonwertuj warstwę tekstową na obiekt inteligentny, klikając prawym przyciskiem myszy warstwę i wybierając opcję "Przekształć w inteligentny obiekt". Domyślnie efekty warstwowe są ograniczone do rasteryzacji tekstu, czyli praktyki, której chcesz uniknąć, nawet podczas projektowania ekranu. Przekształcanie do obiektów inteligentnych umożliwia stosowanie filtrów i innych technik w tekście przy jednoczesnym zachowaniu możliwości edycji w razie potrzeby zmiany tego, co tekst mówi później.
Pamiętaj, że masz dostęp do opcji śledzenia i kerningu podczas konfigurowania elementów tekstowych. Nawet jeśli twój tekst ma być odtworzony w CSS, powinieneś wcześnie eksperymentować z odstępami między wierszami i literami, aby lepiej zobrazować, w jaki sposób twoje treści pojawią się w przestrzeni, którą ci podałeś. Pamiętaj też, aby używać tekstu "ostry" lub "ostry", aby zachować definicję i wyrazistość.
Sposób prezentowania treści w czystym designie jest ważniejszy niż jakikolwiek inny styl, tylko dlatego, że mniej się dzieje wizualnie, aby odwrócić uwagę widza. Korzystając z powyższych wskazówek, aby odpowiednio wyrazić tekst i obiekty, dodać definicję i zainteresowanie, a także ustawić zawartość poza interfejsem, projekt uzyska optymalną skuteczność.
Co sądzisz o tych poradach i czy regularnie korzystasz z innych? Udostępnij poniżej ...