20 sztuczek Photoshopa dla projektantów stron internetowych

Prawdopodobnie każdy projektant stron internetowych ma w zanadrzu swój własny zestaw ulubionych sztuczek Photoshopa. Z dobrego powodu. Zaawansowana edycja obrazów firmy Adobe to podstawa w świecie projektowania stron internetowych. Bardzo niewiele programów może konkurować z tym doskonałym oprogramowaniem i jego szeroką gamą funkcji.

Jednak chociaż większość projektantów stron internetowych zna się na Photoshopie, zawsze możesz się nauczyć czegoś więcej. W końcu program jest nie tylko potężny, ale także złożony. Ponadto nowe rzeczy są dodawane regularnie poprzez aktualizacje.

Z tego powodu dobrym pomysłem jest kontynuowanie odkrywania swojego ulubionego narzędzia. Aby Ci w tym pomóc, w tym artykule przyjrzymy się niektórym z najlepszych dostępnych sztuczek w Photoshopie. Rzeczy, które mogą usprawnić przepływ pracy, ułatwić pracę i życie, zaoszczędzić czas i pomóc w projektowaniu najlepszych stron internetowych.

Czy chcesz dowiedzieć się więcej o Photoshopie? Następnie czytaj dalej.

Sztuczki Photoshopa, które zmienią Cię w kreatora projektowania stron internetowych

Poniższe wskazówki obejmują zakres od poziomu początkującego do bardziej złożonego materiału. Każdy z nich został wybrany, aby pomóc Ci być najlepszym projektantem stron internetowych, jakim możesz być.

1. Usprawnij swoją przestrzeń roboczą

Zacznijmy od podstaw. Pierwszą rzeczą, którą należy zrobić, aby poprawić przepływ pracy, jest skonfigurowanie programu Photoshop w sposób, który obsługuje sposób, w jaki go używasz. W końcu praca staje się łatwiejsza dzięki ostrzejszemu narzędziu.

Z tego powodu naszym pierwszym przystankiem jest Window > Workspace > Graphic and Web . Wybranie tej opcji zmieni dostępne narzędzia na te, których najprawdopodobniej będziesz używać do projektowania stron internetowych.

Następnie przejdź do Edycja > Preferencje . Tutaj jednym z najważniejszych przystanków jest Units & Rulers. Bez względu na wybraną tutaj wielkość (najprawdopodobniej piksele), będzie to wartość domyślna dla wszystkich przyszłych dokumentów.

(Krótka wskazówka: Aby zmienić linijki dla pojedynczych dokumentów, po prostu kliknij je prawym przyciskiem myszy i wybierz żądaną jednostkę miary.)

Następnie przejdź do Preferencje> Wydajność> Historia i pamięć podręczna i kliknij Web / UI Design .

Spowoduje to zmianę ustawień pamięci podręcznej, aby faworyzować mniejsze pliki z wieloma warstwami, z czym najczęściej będziesz pracować.

W tym samym miejscu możesz również wybrać liczbę stanów historii. Tyle kroków możesz cofnąć, jeśli chcesz coś cofnąć.

Na koniec wyjdź z preferencji, zamknij wszystkie dokumenty i naciśnij przycisk T na klawiaturze. Spowoduje to wyświetlenie menu czcionek na górze ekranu. To, co tutaj ustawisz, będzie odtąd standardem dla nowych dokumentów. Ponieważ nikt tak naprawdę nie lubi Myriad Pro.

2. Naucz się skrótów klawiaturowych

W przypadku każdego programu, którego używasz regularnie, nauka skrótów klawiaturowych jest ogólnie dobrą radą.

Na przykład używam Ctrl+Alt+2/3 do tworzenia nagłówków h2 i h3 podczas pisania tego posta. Jest to znacznie szybsze niż używanie paska narzędzi edytora, ponieważ nie muszę odrywać rąk od klawiatury.

To samo dotyczy Photoshopa. Umiejętność wykonywania akcji za pomocą prostych naciśnięć klawiszy jest nieskończenie szybsza niż klikanie w menu.

W tym artykule wymienimy kilka skrótów klawiaturowych. Jednak polecam również tę ściągawkę, aby nauczyć się skrótów do najczęstszych operacji Photoshopa. Poza tym dobrym pomysłem jest wyrobienie sobie nawyku sprawdzania skrótów klawiaturowych dla rzeczy, które robisz w kółko.

3. Warstwy grup i nazw

Podczas pracy z Photoshopem będziesz pracować z dużą ilością warstw. Nie tylko większość elementów otrzymuje własną warstwę, ale modyfikacje, takie jak jasność/kontrast, są również dodawane jako warstwy.

Z tego powodu bardzo szybko może się mylić. Na szczęście istnieje wiele opcji, aby to zmniejszyć, z których dwie to możliwość grupowania i nazywania warstw.

Po pierwsze, klikając dwukrotnie dowolną warstwę, możesz zmienić jej nazwę na dowolną.

W ten sposób łatwo zrozumiesz, czy warstwa zawiera obraz tła, menu czy pasek boczny.

Możesz też wybrać kilka warstw jednocześnie, przytrzymując klawisz Ctrl, aby wybrać poszczególne warstwy, lub Shift, aby zaznaczyć zakres sąsiednich warstw. Ctrl+G następnie zamienia je w grupę.

Alternatywnie kliknij prawym przyciskiem myszy warstwy i wybierz opcję grupowania z tego miejsca. Tak czy inaczej, twoje warstwy są znacznie lepiej zorganizowane. Dodatkowo możesz również nazwać zgrupowane warstwy!

4. Filtruj warstwy

Nazywanie i grupowanie warstw to dobry początek. Jednak pracując z dziesiątkami, a nawet setkami z nich, nadal można łatwo się pomylić.

W takich przypadkach masz również możliwość filtrowania warstw. Aby to zrobić, po prostu użyj menu u góry menu Warstwy, aby filtrować według typu, nazwy, efektu, koloru i innych.

Możesz też bezpośrednio wybrać warstwę za pomocą narzędzia Przesuń , przytrzymując klawisz Ctrl i klikając warstwę lub obiekt.

5. Utwórz siatkę

Zdjęcie: PureSolution / shutterstock.com.

Siatka jest jedną z najważniejszych zasad projektowania stron internetowych. Uporządkuje projektowanie i pomoże w rozmieszczeniu przedmiotów. Z tego powodu sensowne jest tworzenie siatki również w Photoshopie.

Aby to zrobić, wybierz Widok > Nowy układ prowadnic . Alternatywnie utwórz prowadnice poziome i pionowe, po prostu klikając linijkę i przeciągając ją do dokumentu. Użyj klawisza Ctrl, aby przenieść istniejące prowadnice.

6. Importuj próbki kolorów

Próbki kolorów można załadować bezpośrednio do programu Photoshop z plików HTML, CSS lub SVG. W ten sposób masz świetny punkt wyjścia dla schematu kolorów podczas pracy z istniejącymi zasobami, takimi jak logo.

Aby skorzystać z tej sztuczki Photoshopa, po prostu otwórz panel Próbki , kliknij menu rozwijane w prawym górnym rogu i wybierz Załaduj próbki . Teraz przejdź do odpowiedniego pliku i otwórz go, aby zaimportować nową próbkę koloru.

7. Zapisz niestandardowe kształty

Zwłaszcza podczas projektowania wielu stron dla tej samej witryny lub witryn o podobnym wyglądzie, będziesz używał tych samych obiektów i kształtów w kółko. Z tego powodu sensowne jest zapisywanie ich jako kształtów niestandardowych w celu szybkiego ponownego użycia.

Aby to zrobić, kliknij prawym przyciskiem myszy dany kształt za pomocą narzędzia do zaznaczania ścieżki (czarna strzałka). Następnie wybierz Zdefiniuj kształt niestandardowy . Gdy to zrobisz, możesz uzyskać dostęp do tego kształtu za pomocą opcji górnego paska narzędzia Kształt niestandardowy . Po prostu kliknij menu rozwijane z napisem Kształt: i wybierz zapisany kształt.

8. Przełączaj się między kolorami tła i pierwszego planu

Dwa przełączają się między kolorem tła i pierwszego planu bez klikania ikony, po prostu naciśnij X na klawiaturze. Dodatkowo, jeśli chcesz, aby kolory wróciły do ​​​​prostej czerni i bieli, możesz to zrobić, naciskając D .

9. Zmień krycie za pomocą klawiatury

Kolejny skrót klawiaturowy: w przypadku dowolnego narzędzia, które może zmienić przezroczystość, możesz to zrobić po prostu za pomocą klawiatury. Liczby od 1 do 0 ustawiają przezroczystość na wartość od 10% do 100%. To samo działa również z nieprzezroczystością warstw.

10. Rysuj linie proste

Aby narysować linię prostą dowolnym narzędziem, po prostu przytrzymaj klawisz Shift . Następnie możesz narysować linię (zarówno poziomą, jak i pionową), która automatycznie będzie prosta jak gwóźdź. Alternatywnie, kliknij dwa różne punkty, aby utworzyć między nimi linię prostą.

11. Przykładowy kolor

Następna w naszej torbie trików Photoshopa jest możliwość próbkowania dowolnego koloru. Jeśli potrzebujesz koloru z dowolnego obiektu, przytrzymaj przycisk Alt i kliknij żądany odcień. Działa to zarówno z Brush , Pencil , Paint Bucket , jak i innymi narzędziami używającymi kolorów.

12. Dodaj lub usuń z zaznaczenia

Możesz dodać do istniejącego zaznaczenia, przytrzymując klawisz Shift i wybierając część, którą chcesz dołączyć. Aby odjąć, zrób to samo, ale z przyciskiem Alt .

13. Cofnij więcej niż jeden krok

Klasycznym sposobem na cofnięcie ostatniej akcji jest użycie Ctrl+Z . Jednak działa to tylko na ostatnią rzecz, którą zrobiłeś. Aby cofnąć się o kilka kroków, użyj Ctrl+Alt+Z .

14. Dynamicznie zmieniaj rozmiar pędzla

Aby zmienić rozmiar pędzla, nie musisz klikać menu rozwijanego i przeciągać go do odpowiedniego rozmiaru. Zamiast tego po prostu przytrzymaj Alt i prawy przycisk myszy, a następnie przeciągnij w lewo i w prawo, aby zmniejszyć i zwiększyć rozmiar pędzla.

15. Zapisz dla sieci

Korzystanie z funkcji Safe for Web jest niezbędne, ponieważ zapewnia, że ​​rozmiar obrazu jest jak najmniejszy. Jest to bardzo ważne, aby poprawić szybkość witryny.

W Photoshopie możesz to zrobić, wybierając Plik > Eksportuj > Zapisz dla Internetu . Jednak szybszym sposobem jest użycie Ctrl+Alt+Shift+S . Zapraszamy!

16. Otwórz obrazy jako warstwy

Czasami konieczne jest jednoczesne zaimportowanie dużej liczby obrazów do programu Photoshop. Jednak gdy po prostu przeciągniesz je do swojej przestrzeni roboczej, zostaniesz poproszony o umieszczenie ich ręcznie.

Bardziej praktycznym sposobem na to jest Plik > Skrypty > Załaduj pliki do stosu . Przejdź do odpowiednich obrazów, zaznacz je i dwukrotnie naciśnij OK . Teraz każdy obraz zostanie automatycznie zaimportowany do własnej warstwy.

17. Skopiuj CSS bezpośrednio z Photoshopa

Jedną z najwygodniejszych sztuczek Photoshopa dla projektantów stron internetowych jest fakt, że program tworzy CSS, który można wyeksportować. Nie ma potrzeby wpisywania tego wszystkiego ręcznie lub stosowania prób i błędów do jego wdrożenia.

Aby z tego skorzystać, po prostu kliknij prawym przyciskiem warstwę i wybierz Kopiuj CSS . Alternatywnie użyj menu Warstwa, aby znaleźć tę samą opcję. Teraz masz wszystkie niezbędne style, które możesz po prostu wkleić do arkusza stylów lub dowolnego innego używanego programu.

18. Projekt dla kilku urządzeń i orientacji jednocześnie

Projektowanie dla sieci w dzisiejszych czasach oznacza projektowanie dla mnóstwa różnych urządzeń. W czasach, gdy urządzenia mobilne przyćmiewają komputery stacjonarne na całym świecie, wdrożenie projektowania mobilnego jest koniecznością.

Źródło: ComScore

Na szczęście Photoshop ma obszary robocze i inteligentne obiekty, które bardzo ułatwiają skalowanie projektu do różnych formatów.

Mógłbym szczegółowo opisać oba te elementy tutaj, jednak Phlearn zrobił doskonały samouczek na ten temat, który wykonuje o wiele lepszą robotę niż kiedykolwiek mógłbym zrobić:

19. Użyj automatycznego przetwarzania dla powtarzalnych zadań

Kolejną niesamowitą funkcją Photoshopa jest automatyczne przetwarzanie. Oznacza to, że możesz powtarzać nagrane zadania w kółko bez konieczności wykonywania ich ręcznie. Jest to bardzo przydatne, na przykład, jeśli chcesz zapisać wiele obrazów w Internecie.

Oto jak to działa. Najpierw otwórz plik. Następnie otwórz Akcje ( Alt + F9 ), znajdź Utwórz nową akcję i kliknij ją. Podaj nazwę i opcjonalnie przypisz kombinację klawiszy i kolor.

Aby nagrać swoje działania, naciśnij Nagraj . Następnie wykonaj operację, którą chcesz powtórzyć. W moim przypadku otwieram obraz z jednego folderu i zapisuję go do internetu w innym folderze.

Po zakończeniu zatrzymaj nagrywanie. Teraz możesz ponownie użyć tej akcji dla wszystkich innych obrazów, oszczędzając mnóstwo czasu. Aby uzyskać więcej informacji o tym, co można zautomatyzować w programie Photoshop, zapoznaj się z tym artykułem.

20. Podgląd na urządzeniu

Wreszcie, wraz z programem Photoshop, Adobe oferuje również aplikację, która umożliwia podgląd pracy na kilku urządzeniach z systemem iOS. Najlepsze: jesteś w stanie obserwować zmiany na urządzeniu podczas ich wprowadzania na komputerze.

Aby to zrobić, zainstaluj aplikację i użyj podglądu urządzenia, aby połączyć program Photoshop z urządzeniem zewnętrznym przez USB lub Wi-Fi. Znajdziesz tę opcję w oknie > Podgląd urządzenia .

Jakie są twoje ulubione sztuczki w Photoshopie?

Photoshop jest jednym z najczęściej używanych narzędzi do projektowania stron internetowych. Jego zaawansowane funkcje sprawiają, że jest idealny do projektowania wysokiej jakości witryn i zasobów.

Jednak z wielką mocą wiąże się również wielka złożoność, a zwłaszcza dla początkujących, opanowanie oprogramowania może zająć trochę czasu.

Aby skrócić krzywą uczenia się, powyżej przedstawiliśmy szereg przydatnych sztuczek Photoshopa dla projektantów stron internetowych. Ułatwiają wiele rzeczy, od ogólnego przepływu pracy po automatyczne przetwarzanie plików.

Znajomość programu Photoshop od środka i na zewnątrz to świetna inwestycja w wyniki finansowe. Kiedy jesteś w stanie robić rzeczy szybciej, możesz przejąć więcej pracy, a tym samym generować większe przychody. A to nigdy nie może być złe.

Jakie są twoje ulubione sztuczki w Photoshopie? Daj nam znać w sekcji komentarzy poniżej, abyśmy wszyscy mogli sobie nawzajem pomóc.

Obraz miniatury artykułu autorstwa Creative Stoll / shutterstock.com