Nauka Photoshopa tylko do projektowania stron internetowych


17

Chcę zostać projektantem stron internetowych, więc oglądam wiele samouczków wideo z Photoshopa, ale niektóre z nich nie są przydatne do projektowania stron internetowych. Na przykład niektóre filmy dotyczą skóry, zębów, rysowania kwiatu lub zmiany wzoru ściany lub podobnych rzeczy. Ponieważ nie mam żadnych konkretnych zasobów do projektowania stron internetowych, a te samouczki to dla mnie rodzaj marnowania czasu!

Czy znasz jakieś źródło samouczka, które pomoże mi nauczyć się projektowania stron internetowych w Photoshopie?

Co powinienem zrobić, aby skupić się na projektowaniu stron internetowych w Photoshopie?

Które części programu Photoshop są niezbędne do projektowania stron internetowych, a które nie?

Odpowiedzi:


15

Każde narzędzie, pędzel, filtr i efekt w Photoshopie ma swój własny cel na świecie. Nie ma prostego „naucz się tego narzędzia i używaj go do wszystkiego”, ponieważ różne narzędzia itp. Są używane do różnych efektów.

Na przykład, jeśli lubisz błyszczące, lekko 3dish błyszczące guziki na swojej stronie (były one bardzo popularne jakiś czas temu), musisz użyć trochę cienia, kilku gradientów, maskowania, a może trochę poruszania ręką za pomocą pędzla. Jako tło możesz użyć jednolitego koloru lub gradientu z teksturowaną / wzorzystą maską.

Ponieważ nie ma „jednej części Photoshopa” do nauki, najlepszą rzeczą, jaką możesz zrobić, to być dobrze dopracowanym za pomocą różnych narzędzi. Przeglądaj i obejrzyj wszystkie odmiany witryn. Zwróć uwagę na funkcje, które lubisz, a następnie spróbuj je odtworzyć samodzielnie. Często można rozdzielić elementy - czy obiekt ma granice, gradienty, tekstury, źródła światła itp. - i odtworzyć coś podobnego.

Jednocześnie nie potrafię wystarczająco mocno wbić domu, aby zaprojektować coś więcej niż tylko Photoshop. Radzę wziąć udział w zajęciach z projektowania w miejscowym college'u społecznościowym (lub gdziekolwiek indziej) i zapoznać się z takimi rzeczami, jak równowaga, kolory, białe znaki itp. Te koncepcje często robią różnicę między wyglądaniem profesjonalnym a wyglądaniem jak czyjaś ciotka ( która, w tym scenariuszu nie jest projektantem z zawodu ) edytował szablon Geocities.


4
„... do zaprojektowania jest coś więcej niż tylko Photoshop”. Usłysz słyszeć! +1.
Philip Regan,

1
Photoshop ma poważny brak niektórych funkcji, które przy projektowaniu układu przyniosłyby ... wzdłuż wielu narzędzi wektorowych. Mogę przejść do programu Illustrator i używać Photoshopa do innych specjalistycznych grafik. Podobnie jak postacie, fotorealistyczne ikony ...
Muhammad Umer

17

„Chcę zostać projektantem stron internetowych, więc oglądam wiele samouczków wideo z Photoshopa”

Czy znasz HTML, CSS i JS? Jeśli nie, zacznij od pierwszego.

Program Photoshop jest następnie używany jako narzędzie do tworzenia grafiki zgodnej z HTML, CSS i JS.

W narzędziach PhotoShop nie ma nic szczególnego „projektowanie stron internetowych”. To po prostu narzędzie do tworzenia i edycji obrazów.


4

Aby zaprojektować strony internetowe, powinieneś również spojrzeć na inne makiety. Zastanów się, jakie efekty możesz zastosować, takie jak skórki stron, łącza paska nawigacji. Dużo tego nie jest trudne do zrobienia w Photoshopie, ale będzie wymagało trochę Googlingu. Często sprawdzam Dribbble, która jest wspaniałą społecznością projektową. Jest bardzo popularny, więc na pewno zobaczysz wiele nowych technik wdrażanych przez projektantów stron internetowych.

Ale aby uzyskać ogólny przegląd, spróbuj pracować z zestawem samouczków specjalnie używanych do projektowania stron internetowych. Nawet naprawdę podstawowe samouczki. Ponieważ zawierają one instrukcje dla Ciebie i możesz je replikować w przyszłych projektach. Dodałem 2 naprawdę świetne zasoby poniżej, mam nadzieję, że je sprawdzisz. Gwarantuję, że znajdziesz poradnik dla początkujących, który Ci się podoba - i nauczysz się dużo!


4

Jeśli chcesz projektować strony internetowe, znacznie lepiej byłoby pracować z Fireworks niż Photoshop. PS jest w gruncie rzeczy aplikacją do manipulacji zdjęciami i chociaż jego narzędzia mogą być używane w modelach szkieletowych, nie są w tym szczególnie wydajne. Mówiąc inaczej: używanie PS do projektowania stron internetowych jest jak używanie PS jako aplikacji DTP w programie InDesign. Tak, można to zrobić, ale nie jest to świetny sposób, a na dłuższą metę przegrasz.

Zalety programu Fireworks to:

  • znacznie łatwiej pracować z prawdziwymi kształtami wektorowymi
  • FAR łatwiej zdefiniować wymiary w pikselach; bez rozmycia pociągnięć na odcinku itp.
  • może zdefiniować „strony wzorcowe”, aby wprowadzić zmiany projektowe w makietach bez konieczności powtarzania każdego obrazu
  • łatwiejsze tworzenie biblioteki często używanych kontrolek interfejsu użytkownika (cenne przy projektowaniu aplikacji internetowych)
  • Interfejs użytkownika zbliżony do typowego interfejsu aplikacji komputerowej, co oznacza płytszą krzywą uczenia się

Jedynymi prawdziwymi zaletami, jakie Photoshop wnosi do stołu, jest fakt

  • renderowanie czcionek jest lepsze
  • Twoi koledzy poznają aplikację (trochę) lepiej

1
Tak, Fireworks jest lepszy, w przeciwnym razie musisz korzystać zarówno z programu Illustrator, jak i Photoshop i przełączać się tam iz powrotem.
Cakey,

0

W notatce „jest więcej do zaprojektowania niż Photoshop”: znalazłem to wnikliwe: http://naldzgraphics.net/tips/what-designers-need-to-know-about-typography/


Cierpi z powodu prozy na palach i sporadycznych błędów gramatycznych. Mogę to podsumować (i ulepszyć) w polu komentarza: Używaj dobrego smaku we wszystkich rzeczach, spójrz w górę i wyjaśnij bardzo następujące słowa: czcionka vs. krój pisma , serif vs. sans serif, kerning, śledzenie, odstępy , prowadzący, wyrównanie, kolor, uzasadniony. Artykuł nie zawiera jasnych ani pełnych definicji większości z nich; wyjaśnienia są powierzchowne i wydają się z drugiej ręki.
Wildcard

Jest to także odpowiedź tylko na link.
Wildcard

0

Photoshop to tylko narzędzie, a im lepiej znasz to narzędzie, tym lepiej będziesz mógł go używać do robienia tego, co chcesz. Jest jednak coś więcej do zaprojektowania niż znajomość Photoshopa.

Ten sposób myślenia, który musisz nauczyć się Photoshopa, a następnie zostać projektantem, jest tym samym, co nazywanie siebie budowniczym, ponieważ wiesz, jak używać młotka lub mechanika, ponieważ możesz użyć klucza. Projekt jako taki sprawia, że ​​wszystko działa dobrze (i prawdopodobnie dobrze wygląda w tym procesie), ma bardzo niewiele wspólnego ze znajomością Photoshop / Illustrator / InDesign / Sketch / cokolwiek, ale jak używasz tych narzędzi do realizacji swoich pomysłów.

Istnieje mnóstwo złych samouczków na YouTube i mnóstwo dobrych. Naucz się, jak to wszystko robić, i tak techniki będą cenne. Creative Block ma również fajne samouczki. Co więcej, spójrz na teorię kolorów, teorię układu, typografię ( Stop Stealing Sheep Erica Spiekermana i dowiedz się, jak Type Type to bardzo dobre intro), a inne bardziej tradycyjne umiejętności projektowania graficznego są znacznie bardziej cennymi umiejętnościami, w które można zainwestować swój czas, niż tylko naukę Photoshop.

Ponadto, jak ktoś wcześniej wspomniał, nauka HTML / CSS / JS jest zdecydowanym plusem również przy projektowaniu stron internetowych.


-2

Możesz sprawdzić swój plik PSD pod kątem znanych problemów ze zgodnością z Internetem tutaj https://www.oss-usa.com/web-preflight?promo=web-preflight jest bezpłatny


Cześć Nik, witaj w GDSE i dziękuję za odpowiedź. Nie rozumiem, jak to odpowiada na pytania. Czy mógłbyś rozwinąć tę kwestię? Dzięki!
Vincent

Mam doświadczenie w tworzeniu stron internetowych i poznałem wielu początkujących w projektowaniu stron internetowych. Są częste błędy, które każdy może popełnić. Na przykład piksele dziesiętne w rozmiarach czcionek. Ta usługa może pomóc nowicjuszowi.
Nik.

Dzięki. Byłoby to jednak bardzo pomocne, jeśli chcesz podzielić się swoim doświadczeniem i opisać te błędy. W ten sposób twoja odpowiedź nadal będzie miała (dużo!) Wartość na wypadek, gdyby link zerwie się później. Zgnilizna linków jest przyczyną, dla której nie bardzo lubimy (głównie) odpowiedzi tylko na linki i powód, dla którego głosowałem za odrzuceniem odpowiedzi. Nie zniechęcaj się, wiemy, że korzystanie z tej witryny może być krzywą uczenia się. My szczęśliwi, że jesteś, przyczyniając się zachować!
Vincent
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.