Изучение Photoshop только для веб-дизайна


17

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

Знаете ли вы какой-нибудь учебный источник, чтобы помочь мне изучить веб-дизайн в Photoshop?

Что я должен сделать, чтобы сосредоточиться на веб-дизайне в Photoshop?

Какие части Photoshop необходимы для веб-дизайна, а какие нет?

Ответы:


15

Каждый инструмент, кисть, фильтр и эффект в Photoshop имеют свою цель в мире. Нет простого «хорошо изучить этот инструмент и использовать его для всего», потому что разные инструменты и т. Д. Используются для разных эффектов.

Например, если вам нравятся блестящие, слегка блестящие глянцевые кнопки на вашей странице (они были очень популярны некоторое время назад), вам нужно будет использовать тень, несколько градиентов, маскирование и, возможно, небольшое дрожание рук с помощью кисти. Для фона вы можете просто использовать сплошной цвет или градиент с текстурированной / узорчатой ​​маской.

Поскольку не нужно изучать «одну часть Photoshop», лучшее, что вы можете сделать, это стать более разносторонним, используя различные инструменты. Посмотрите вокруг и посмотрите на все варианты сайтов. Запишите функции, которые вам нравятся, а затем попытайтесь воссоздать их самостоятельно. Часто вы можете анализировать элементы - есть ли у объекта границы, градиенты, текстуры, источники света и т. Д. - и воссоздать нечто подобное.

В то же время, я не могу усердно заниматься этим, чтобы в дизайне было больше, чем просто Photoshop. Я бы порекомендовал взять урок дизайна в местном общественном колледже (или где-то еще) и почувствовать такие вещи, как баланс, цвета, пробелы и т. Д. Эти понятия часто определяют разницу между тем, чтобы выглядеть профессионально и выглядеть как чья-то тетя ( кто, в этом сценарии не дизайнер по профессии ) отредактировал шаблон Geocities.


4
«... дизайн - это нечто большее, чем просто фотошоп». Слышу, слышу! +1.
Филипп Реган

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

17

«Я хочу стать веб-дизайнером, поэтому я смотрю много видеоуроков по Photoshop»

Знаете ли вы HTML, CSS и JS? Если нет, то начните там сначала.

Затем Photoshop используется как инструмент для создания графики, которая работает с HTML, CSS и JS.

В PhotoShop нет ничего особенного, ориентированного на «дизайн веб-сайта». Это просто инструмент для создания и редактирования изображений.


4

Для разработки веб-сайтов вы должны взглянуть и на другие макеты. Рассмотрим некоторые эффекты, которые вы можете использовать, такие как пилинг страниц, ссылки на панели навигации. Многое из этого не сложно сделать в Photoshop, но потребует немного Googling. Я часто проверяю Dribbble - замечательное дизайнерское сообщество. Он очень популярен, поэтому вы наверняка увидите, что веб-дизайнеры внедряют много новых технологий.

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


4

Если вы хотите создавать веб-сайты, вам лучше работать с Fireworks, чем с Photoshop. PS по сути своей является приложением для работы с фотографиями, и хотя его инструменты можно использовать для каркасов, они не особенно эффективны в этом. Другими словами, использование PS для веб-дизайна похоже на использование PS в качестве приложения DTP поверх InDesign. Да, это может быть сделано, но это не лучший способ сделать это, и вы в конечном итоге проиграете.

Преимущества, которые дает Fireworks:

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

Единственными реальными преимуществами, которые Photoshop приносит на стол, является тот факт, что

  • рендеринг шрифта лучше
  • ваши коллеги будут знать приложение (немного) лучше

1
Да, Fireworks лучше, в противном случае вам придется использовать и Illustrator, и Photoshop и переключаться туда-сюда.
Cakey

0

На заметку "есть больше, чем дизайн Photoshop": я нашел это проницательным: http://naldzgraphics.net/tips/what-designers-need-to-know-about-typography/


Он страдает от неестественной прозы и случайных грамматических ошибок. Я могу суммировать это (и улучшить его) в поле для комментариев: используйте хороший вкус во всех вещах, и посмотрите вверх и получите четкое представление о следующих словах: шрифт против шрифта , засечек против без засечек, кернинг, отслеживание, интервалы , ведущий, выравнивание, флеш, оправдано. Статья не дает четких или полных определений для большинства из них; объяснения поверхностны и кажутся подержанными.
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.