Навчання Photoshop просто для веб-дизайну


17

Я хочу стати веб-дизайнером, тому переглядаю багато навчальних посібників Photoshop, але деякі з цих навчальних посібників не корисні для веб-дизайну. Наприклад, деякі фільми про шкіру, зуби чи малювання квітки або зміну візерунка стіни чи подібних речей. Тому що я не маю жодного конкретного ресурсу для веб-дизайну, і ці підручники для мене є своєрідним витрачанням часу!

Чи знаєте ви будь-яке джерело підручника, щоб допомогти мені вивчити веб-дизайн у Photoshop?

Що мені робити, щоб зосередитись на веб-дизайні у Photoshop?

Які частини Photoshop необхідні для веб-дизайну, а які - ні?

Відповіді:


15

Кожен інструмент, пензлик, фільтр та ефект у Photoshop мають своє власне призначення у світі. Немає простого "добре вивчити цей інструмент і використовувати його для всього", тому що різні інструменти тощо використовуються для різних ефектів.

Наприклад, якщо вам подобаються блискучі злегка 3d-глянцеві глянсові кнопки на вашій сторінці (вони були дуже популярні деякий час тому), вам знадобиться використати тінь, кілька градієнтів, маскування та, можливо, трохи помацання рукою за допомогою інструменту пензля. Для фону ви можете просто використовувати суцільний колір або градієнт за допомогою текстурованої / візерункової маски.

Оскільки не існує жодної частини Photoshop для навчання, найкраще, що ви можете зробити, - це зробити всебічне використання за допомогою різних інструментів. Перегляньте і подивіться всі різновиди сайтів. Візьміть на замітку функції, які вам подобаються, а потім спробуйте відтворити їх самостійно. Часто ви можете розсікати елементи - чи об’єкт має межі, градієнти, текстури, джерела світла тощо - і відтворити щось подібне.

У той же час, я не можу досить сильно забити будинок, щоб зробити дизайн більше, ніж просто Photoshop. Моєю рекомендацією було б взяти клас дизайну в коледжі місцевої громади (або колись) та відчути такі речі, як рівновага, кольори, пробіли тощо. Ці поняття часто мають різницю між виглядом професіонала та схожим на чиюсь тітку ( кого, у цьому сценарії не є дизайнером у галузі торгівлі ) редагував шаблон Geocities.


4
"... для дизайну є більше, ніж просто Photoshop." Почуй чуй! +1.
Філіп Реган

1
У Photoshop є серйозний брак деяких функцій, від яких розробка макета виграла б ... разом із безліччю векторних інструментів. Я можу перейти на ілюстратор і використати фотошоп для іншої спеціалізованої графіки. Як і персонажі, фотореалістичні іконки ...
Мухаммед Умер

17

"Я хочу стати веб-дизайнером, тому переглядаю багато відео-уроків Photoshop"

Чи знаєте ви HTML, CSS та JS? Якщо ні, почніть з цього спочатку.

Потім Photoshop використовується як інструмент для створення графіки, що йде разом з HTML, CSS та JS.

Немає нічого особливого "дизайну веб-сайтів", орієнтованого на конкретні інструменти в PhotoShop. Це просто інструмент створення та редагування зображень.


4

Щоб створити веб-сайти, ви також повинні переглянути інші макети. Розглянемо деякі ефекти, які можна використати, наприклад, пілінг сторінок, посилання на панелі навігації. Багато з цього не важко зробити у Photoshop, але потрібно буде трохи погуглити. Я часто перевіряю Dribbble, який є чудовим дизайнерським співтовариством. Це дуже популярно, тому ви неодмінно побачите багато нових методик, які веб-дизайнери впроваджують.

Але для отримання загального огляду спробуйте попрацювати з набором навчальних посібників, спеціально використовуваних для розробки веб-сайтів. Навіть дійсно основні навчальні посібники. Тому що вони окреслюють кроки для вас, і ви можете їх повторити на майбутніх проектах. Нижче я додав 2 дійсно чудових ресурсу, сподіваюся, ви їх перевірите. Я гарантую, що ви знайдете підручник з шаблоном для початківців, який вам подобається - і ви багато чого навчитесь!


4

Якщо ви хочете створити веб-сайти, вам буде набагато краще працювати з феєрверками, ніж Photoshop. PS по своїй суті є програмою для маніпуляцій з фотографіями, і хоча його інструменти можна використовувати для каркасних каркасів, вони в цьому не особливо ефективні. По-іншому: використовувати PS для веб-дизайну - це як використовувати PS як DTP-додаток через InDesign. Так, це можна зробити, але це не чудовий спосіб зробити це, і ви втратите з часом.

Переваги, які приносить феєрверк:

  • набагато простіше працювати з справжніми векторними формами
  • FAR легше визначити розміри пікселів; відсутність розмиття ударів на розтяжці тощо.
  • можна визначити "головні сторінки", щоб внести зміни в дизайн сайту на ваші макети, не потрібно повторювати кожне зображення
  • простіше створити бібліотеку часто використовуваних елементів управління користувальницьким інтерфейсом (цінні для розробки веб-додатків)
  • Користувальницький інтерфейс ближче до типового інтерфейсу додатків для настільних ПК, що означає більш дрібну криву навчання

Єдині реальні переваги, які Photoshop приносить на стіл, це той факт, що

  • краща візуалізація шрифту
  • ваші колеги дізнаються додаток (трохи) краще

1
Так, феєрверк краще, інакше вам доведеться використовувати і Illustrator, і Photoshop, і перемикатися вперед і назад.
Cakey

0

Зауважуючи, що "дизайну є більше, ніж Photoshop": я вважав це проникливим: http://naldzgraphics.net/tips/what-designers-need-to-know-about-typography/


Він страждає від стислої прози та випадкових граматичних помилок. Я можу підсумувати його (і покращити його) у поле для коментарів: Використовуйте гарний смак у всіх речах, а також шукайте та чітко ознайомтеся з такими словами: шрифт проти шрифта , serif проти sans serif, кернінг, відстеження, інтервал , ведучий, вирівнювання, промивання, виправданий. Стаття не дає чітких або повних визначень для більшості з них; пояснення поверхові і здаються утримуваними.
Wildcard

Також це лише відповідь посилання.
Wildcard

0

Photoshop - це лише інструмент, і чим краще ви знаєте інструмент, тим краще ви зможете ним користуватися, щоб робити те, що ви хочете робити. Однак для дизайну є більше, ніж просто знати Photoshop.

Таке мислення, що вам просто потрібно вивчити Photoshop, а потім ви будете дизайнером - це те саме, що називати себе будівельником, тому що ви знаєте, як користуватися молотком, або механіком, тому що можете використовувати гайковий ключ. Дизайн як такий змушує речі працювати добре (і, ймовірно, добре виглядати в процесі), це має дуже мало спільного з тим, щоб знати Photoshop / Illustrator / InDesign / Sketch / що завгодно, але як ви використовуєте ці інструменти для реалізації своїх ідей.

На YouTube є багато поганих підручників і теж хороших. Дізнайтеся, як це все зробити, методи все одно будуть корисними внизу. Creative Block також має приємні підручники. Але крім того, погляньте на теорію кольорів, теорію компонувань, тифографію (Ерік Шпікерман " Стоп крадіжок овець та дізнайся, як тип робіт - це дуже хороший вступ") та інші більш традиційні навички графічного дизайну - набагато цінніші навички, щоб вкласти свій час, ніж просто навчання Photoshop.

Крім того, як хтось згадував раніше, вивчення HTML / CSS / JS є певним плюсом і для роботи над веб-дизайном.


-2

Ви можете перевірити файл PSD на відомі проблеми сумісності з веб-сайтом тут https://www.oss-usa.com/web-preflight?promo=web-preflight це безкоштовно


Привіт Нік, ласкаво просимо на GDSE і дякуємо за вашу відповідь. Я не бачу, як це дає відповіді на запитання, чи не могли б ви детальніше розглянути? Спасибі!
Вінсент

У мене є досвід веб-розробки, і я познайомився з багатьма новачками в веб-дизайні. Є загальні помилки, які може зробити кожен. Наприклад, десяткових пікселів розміром шрифту. Ця послуга може допомогти новачкові.
Нік

Спасибі. Це, однак, дійсно допоможе, якщо ви хочете поділитися своїм досвідом і пояснити ці помилки. Таким чином, ваша відповідь все одно матиме (чимало!) Значення у випадку, якщо посилання розірветься згодом. Гниль посилань - це причина, по якій ми не дуже захоплюємося (в основному) дзвінками лише для посилань, і тому я проголосував вашу відповідь. Не відволікайте, будь ласка, ми знаємо, що використання цього сайту може бути кривою навчання. Ми це раді бачити вас, тримати внесок!
Вінсент
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.