Основы веб-дизайна: обучающий мини-курс. Веб дизайн уроки фотошоп


Уроки Фотошоп для начинающих Веб-дизайнеров • Photoshop•UI

Уроки Фотошоп для начинающих Веб-дизайнеров • Photoshop•UI

Duration 06:20:06

Открыть все курсы от udemy

Уроки Фотошоп для начинающих. Пошаговые уроки Adobe Photoshop дадут Вам крепкую основу для дальнейшего развития.  В этом курсе собраны все основные уроки Фотошопа для начинающих веб-дизайнеров и не только. Шаг-за-шагом мы с Вами изучим все инструменты, функции и разные возможности Фотошопа, которые по окончанию курса дадут Вам возможность легко и быстро работать и над макетами для веб-дизайна, и над печатными изделиями, и над фотографиями. По сравнению с книгами и обучающими статьями, этот формат обучения Фотошопа с нуля при помощи видео уроков, сделает Ваше обучение легким и интересным. Весь курс длится около 7 часов. В течении всего этого времени я всегда буду на связи и помогу в случае любой трудности. Моя единственная цель и цель этого курса, подготовить крепкую основу знания программы Adobe Photoshop.  

Какова целевая аудитория?

  • Этот курс Фотошопа предназначен для начинающих Дизайнеров и Разработчиков, кто хочет с нуля научиться грамотно использовать программу Photoshop CC 2017, и применять в Веб-дизайне
  • Для людей с ограниченными возможностями, которые могут пользоваться компьютером
  • Для тех, кто хочет научиться новой профессии или новым навыкам
  • Для тех, кто хочет реализовать мечту и стать поближе к искусству творения
  • Для тех, кто просто хочет разнообразить жизнь новыми знаниями
Полный список уроков Развернуть / Свернуть
  • Урок 1. Введение 00:03:43
  • Урок 2. Системные требования | Photoshop CC 2017 00:00:31
  • Урок 3. Разница между растровой и векторной графикой 00:05:00
  • Урок 4. Цветовые модели: RGB, CMYK, GreyScale, HSB, HSL, LAB 00:05:30
  • Урок 5. Немного истории 00:02:06
  • Урок 6. Знакомство с программой 00:03:46
  • Урок 7. Распределение рабочей среды 00:05:55
  • Урок 8. Артборды или Монтажные области - как с ними работать и зачем? 00:02:54
  • Урок 9. Панель инструментов Adobe Photoshop, группы инструментов <<Выделение>> 00:07:13
  • Урок 10. Группа инструментов <<Кадрирование>>, <<Измерение>> 00:03:16
  • Урок 11. Группа инструментов <<Раскрашивание>> 00:08:26
  • Урок 12. Группа инструментов <<Ретуширование>> 00:09:03
  • Урок 13. Группы инструментов <<Рисование и текст>>. 1 - Инструент <<Перо>> 00:04:00
  • Урок 14. Группа инструментов <<Фигура>> - Часть 1 00:07:29
  • Урок 15. Группа инструментов <<Фигура>> - Часть 2 00:03:00
  • Урок 16. Группа инструментов <<Текст>> - Часть 1 00:06:33
  • Урок 17. Группа инструментов <<Текст>> - Часть 2 00:05:07
  • Урок 18. Группа инструментов <<Навигация>> 00:01:04
  • Урок 19. Направляющие и линейки 00:02:00
  • Урок 20. Панель - Слои в Фотошопе. Часть 1. 00:03:32
  • Урок 21. Панель - Слои в Фотошопе. Часть 2. 00:05:11
  • Урок 22. Примеры наложения слоев 00:02:29
  • Урок 23. Смарт-объекты в Фотошопе. Часть 1. 00:02:56
  • Урок 24. Работа со Смарт-объектами в Фотошопе. Часть 2. 00:02:57
  • Урок 25. Слои-маски 00:03:25
  • Урок 26. Слои-маски. Упражнение. 00:03:22
  • Урок 27. Быстрые маски. Создание и редактирование. 00:01:53
  • Урок 28. Быстрые маски. Упражнение. 00:02:15
  • Урок 29. Обтравочные маски слоев или клиппинг-маски 00:02:23
  • Урок 30. Обтравочные маски слоев или клиппинг-маски. Упражнение 1. 00:01:36
  • Урок 31. Стили и эффекты слоев. Часть 1. Знакомство. 00:03:03
  • Урок 32. Стили и эффекты слоев. Часть 2. Bevel & Emboss. 00:05:48
  • Урок 33. Стили и эффекты слоев. Упражнение - Bevel & Emboss. 00:02:10
  • Урок 34. Стили и эффекты слоев. Часть 3. Stroke. 00:01:35
  • Урок 35. Стили и эффекты слоев. Упражнение - Stroke. 00:01:24
  • Урок 36. Стили и эффекты слоев. Часть 4. Inner and Drop Shadow. 00:03:39
  • Урок 37. Стили и эффекты слоев. Упражнение - Inner and Outer Shadow. 00:06:01
  • Урок 38. Стили и эффекты слоев. Часть 5. Inner and Outer Glow. 00:01:15
  • Урок 39. Стили и эффекты слоев. Упражнение - Inner and Outer Glow. 00:04:02
  • Урок 40. Стили и эффекты слоев. Часть 6. Satin. 00:01:10
  • Урок 41. Стили и эффекты слоев. Часть 7. Color, Gradient, Pattern Overlay. 00:02:14
  • Урок 42. Корректировочные слои. Часть 1. Solid Color, Gradient, Pattern, Brightness/Co... 00:03:11
  • Урок 43. Корректировочные слои. Часть 2. Levels. 00:02:42
  • Урок 44. Корректировочные слои. Часть 3. Curves. Exposure. 00:02:18
  • Урок 45. Корректировочные слои. Часть 4. Hue/Saturation. Vibrance. 00:03:15
  • Урок 46. Корректировочные слои. Часть 5. Color Balance. Black&White. Photo Filter. 00:02:38
  • Урок 47. Корректировочные слои. Часть 6. Invert. Posterize. Threshold. Gradient Map. S... 00:02:20
  • Урок 48. Использование корректировок. Часть 1. Shadows/Highlights. HDR Toning. 00:02:46
  • Урок 49. Использование корректировок. Часть 2. Desaturate, Match Color, Replace Color,... 00:02:22
  • Урок 50. Меню Image. 00:02:08
  • Урок 51. Основы фильтров 00:02:34
  • Урок 52. Группа фильтров Artistic (Имитация) 00:03:07
  • Урок 53. Группа фильтров Brush Strokes (Штрихи) и Distort (Искажение) 00:02:32
  • Урок 54. Группа фильтров Sketch (Эскиз) 00:05:38
  • Урок 55. Группа фильтров Stylize (Стилизация) и Texture (Текстура) 00:02:18
  • Урок 56. Использование фильтра «Адаптивный широкий угол» 00:01:41
  • Урок 57. Liquify - Пластика 00:03:45
  • Урок 58. Меню Фильтры продолжение. Группы фильтров Blur и Pixelete. 00:02:53
  • Урок 59. Меню Фильтры продолжение. Группы фильтров Render и Sharpen. 00:03:21
  • Урок 60. Меню Фильтры продолжение. Группы фильтров Stylize. 00:03:26
  • Урок 61. Меню Фильтры продолжение. Группы фильтров Other. 00:03:39
  • Урок 62. Панели Actions. 00:04:32
  • Урок 63. Панели Layer Comps. 00:05:41
  • Урок 64. Трансформирование объектов 00:04:14
  • Урок 65. Сохранение и экспорт файлов 00:05:12
  • Урок 66. Что такое веб-сайт 00:11:43
  • Урок 67. Какова роль Дизайнера при его создании 00:06:08
  • Урок 68. Как и где искать работодателя? Где искать вдохновление и где выставить работы? 00:03:10
  • Урок 69. Рисуем кнопки 00:05:47
  • Урок 70. Пример создания веб-страницы - Часть 1 00:30:22
  • Урок 71. Пример создания веб-страницы - Часть 2 00:30:22
  • Урок 72. Пример создания веб-страницы - Часть 3 00:30:22
  • Урок 73. Пример создания веб-страницы - Часть 4 00:33:03

Этот курс находится в платной подписке!

И будет доступен в бесплатном просмотре 21.12.2018. Если у тебя еще нет у нас аккаунта - зарегистрируйся и оформи премиум подписку в своем личном кабинете, и смотри этот, а также многие другие курсы, прямо сейчас.

Следи за последними обновлениями и новостями в нашем coursehunters.club, или вступай в наш канал telegram.

Комментарии

Похожие курсы

25-05-201630-11--0001 ru 95 уроков kartashov Adobe photoshop (для фотографов)

Данный видеокурс посвящен Adobe Photoshop – многофункциональному графическому редактору, занимающему лидирующие места по популярности и использованию во всем мире. Программа содержит большое количество различных инструментов и функций для обработки растровых изображений, что позволяет широко использовать ее в веб-разработке. Благодаря данному курсу Вы научитесь качественной обработке в Photoshop, Lightroom, а также получите уроки по студийной...

Duration 17:09:57

26-05-201630-11--0001 en 31 урок

В этом видеокурсе ты узнаешь как пользоваться фотошопом для нужд фронт разработчика, и даже больше - вебдизайнера. На сайте есть также вот этот урок , но он больше для фотографов, в вебе столько инфы не надо.

Duration 04:23:31

30-09-201630-11--0001 ru 100 уроков lyndacom Photoshop CC. Один-на-Один (Мастер)

Photoshop CC Один-на-Один - наверно самый полный видеокурс по этому графическому редактору. В нем до тошноты рассмотрится каждый эффект и все способы его применения. К тому же, эти уроки записал ведущий експерт по продуктам Adobe Дик МакКлеланд.

Duration 09:03:57

30-09-201630-11--0001 ru 128 уроков lyndacom Photoshop CC. Один-на-Один (Новычок)

Photoshop CC. Один-на-Один (Средний) - в этом разделе ты подробно узнаешь об основных инструментах этой программы, а также здесь расскажут что такое смарт-обьект, шум, режимы наложения...

Duration 11:42:21

30-09-201630-11--0001 ru 119 уроков lyndacom Photoshop CC. Один-на-Один (Средний)

Photoshop CC. Один-на-Один (Новичок) - в этом разделе ты узнаешь, как создавать фигуры, редактировать их, работать с векторами и тп...

Duration 09:50:20

14-10-201630-11--0001 ru 149 уроков lyndacom Photoshop CS6. Один на Один (База)

Здесь расскажут основы программного пакета, а также об общедоступных инструментах для работы. Если ты решился изучать Фотошоп, тогда тебе стоит начать с этого курса. Так что будь умницей и начинай с первого урока.

Duration 10:26:39

21-01-201801-06-2017 ru 4 урока webformyself Графический редактор Photoshop

Веб-дизайн постоянно изменяется, но Photoshop все еще остается классикой. Дизайнеры используют его для создания элементов пользовательского интерфейса, веб-графики, каркасов и функциональных макетов. Конструкции, которые легко переходят в производство. В этом курсе вы увидете как Photoshop используется в современном рабочем процессе front-end разработчика. Разработчику не нужно знать ввесь фотошоп, но есть вещи, без которых вы не сможете...

Duration 00:39:02

28-01-201822-02-2016 en 48 уроков

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

Duration 03:33:23

coursehunters.net

Photoshop CC для Веб-дизайна - Видеоуроки

Photoshop CC for the Web

Duration 03:33:23

Открыть все курсы от pluralsight

Photoshop CC for the Web - Полный список уроков

Развернуть / Свернуть
  • Урок 1. Course Overview 00:01:53
  • Урок 2. Creating a Sketch 00:02:47
  • Урок 3. Creating a New Document 00:04:40
  • Урок 4. Setting up the Workspace 00:06:58
  • Урок 5. Understanding Artboards 00:07:09
  • Урок 6. Reviewing Smart Objects 00:04:59
  • Урок 7. Reviewing Web Color 00:01:56
  • Урок 8. Creating a Sketch 00:02:32
  • Урок 9. Using a Grid System 00:02:39
  • Урок 10. New Guide Layout 00:05:04
  • Урок 11. Completing the Wireframe Template 00:04:23
  • Урок 12. Adding Wireframe Elements 00:06:44
  • Урок 13. Finishing the Wireframe 00:06:51
  • Урок 14. Adding Tablet and Mobile Artboards 00:08:08
  • Урок 15. Review of Adobe Services 00:02:03
  • Урок 16. Selecting Colors 00:04:23
  • Урок 17. Choosing Typefaces 00:02:34
  • Урок 18. Creating Styles 00:09:14
  • Урок 19. Adobe Stock 00:02:24
  • Урок 20. Looking at UI Kits 00:02:17
  • Урок 21. Considering Icon Fonts 00:06:16
  • Урок 22. Converting Fonts to Shapes 00:04:15
  • Урок 23. Adding Background Images to Desktop Layout 00:05:09
  • Урок 24. Adding Images to Tablet and Phone Layouts 00:03:49
  • Урок 25. Using Text Styles 00:05:42
  • Урок 26. Inserting Bio Images 00:05:34
  • Урок 27. Enhancing the Sections 00:07:45
  • Урок 28. Finishing the Header and Footer 00:07:07
  • Урок 29. Staying Organized 00:03:22
  • Урок 30. Simulating Multiple Pages with Layer Comps 00:04:07
  • Урок 31. Leaving Notes 00:01:45
  • Урок 32. Understanding Web File Formats 00:03:02
  • Урок 33. Export Options 00:03:26
  • Урок 34. Save a JPG 00:05:13
  • Урок 35. Exporting a GIF and PNG 00:03:36
  • Урок 36. Save an SVG 00:06:10
  • Урок 37. Quick Export 00:02:21
  • Урок 38. Understanding HiDPI Graphics 00:06:56
  • Урок 39. Creating an Animated GIF 00:07:45
  • Урок 40. Image Slicing 00:03:36
  • Урок 41. Generate Image Assets 00:05:16
  • Урок 42. Extracting CSS 00:02:45
  • Урок 43. Creating Sprite Sheets 00:05:29
  • Урок 44. Working with Actions 00:04:44
  • Урок 45. Batch Processing 00:03:05
  • Урок 46. Using the Image Processor 00:02:37
  • Урок 47. Device Preview 00:02:25
  • Урок 48. Conclusion 00:00:28

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

Твоя оценка

Следи за последними обновлениями и новостями в нашем coursehunters.club, или вступай в наш канал telegram.

Комментарии

Похожие курсы

21-01-201801-06-2017 ru 4 урока webformyself Графический редактор Photoshop

Веб-дизайн постоянно изменяется, но Photoshop все еще остается классикой. Дизайнеры используют его для создания элементов пользовательского интерфейса, веб-графики, каркасов и функциональных макетов. Конструкции, которые легко переходят в производство. В этом курсе вы увидете как Photoshop используется в современном рабочем процессе front-end разработчика. Разработчику не нужно знать ввесь фотошоп, но есть вещи, без которых вы не сможете...

Duration 00:39:02

26-05-201630-11--0001 en 31 урок

В этом видеокурсе ты узнаешь как пользоваться фотошопом для нужд фронт разработчика, и даже больше - вебдизайнера. На сайте есть также вот этот урок , но он больше для фотографов, в вебе столько инфы не надо.

Duration 04:23:31

21-11-201819-09-2018 ru 73 урока udemy Уроки Фотошоп для начинающих Веб-дизайнеров • Photoshop•UI

Уроки Фотошоп для начинающих. Пошаговые уроки Adobe Photoshop дадут Вам крепкую основу для дальнейшего развития.  В этом курсе собраны все основные уроки Фотошопа для начинающих веб-дизайнеров и не только. Шаг-за-шагом мы с Вами изучим все инструменты, функции и разные возможности Фотошопа, которые по окончанию курса дадут Вам возможность легко и быстро работать и над макетами для веб-дизайна, и над печатными изделиями, и над фотографиями....

Duration 06:20:06

coursehunters.net

Основы веб-дизайна: обучающий мини-курс | Уроки Фотошопа (Photoshop)

Представляю вам мини-курс по основам веб-дизайна. Курс записывался на youtube в течение двух лет. Разумеется, это не исчерпывающий курс по веб-дизайну, и он не заменит полноценного обучения.

Тем не менее, после этого курса вы сможете стартовать в профессии (постоянно углубляя свои знания и навыки). Здесь разобраны самые необходимые для старта темы (на чем строится веб-дизайн, как общаться с заказчиком, и как именно работать в фотошопе).

Курс построен следующим образом: сначала дается вводная теоретическая информация (модульные сетки, бриф, прототипирование, коммуникация с заказчиком), затем сразу приступаем к практике (создание главной и внутренней страниц с адаптивными версиями). Вся информация привязана к конкретному проекту, т.е. это не абстрактные рассуждения и не дизайн абстрактной страницы в вакууме.

Вы можете посмотреть, что получилось по итогам курса на behance странице проекта

1. Основы веб дизайна #1 — модульные сетки (Grid Systems)

Знакомимся с понятием модуля и модульной сетки. Для чего нужна сетка, и как она работает (на конкретных примерах)? Какие модульные сетки бывают? Где взять готовые, и как создать свою? В этом модуле мы разберем эти и многие другие вопросы.

Сайты с сетками, которые упоминались в уроке:

Сайты для создания модульных сеток:

2. Основы веб дизайна #2 — Постановка задачи, работа с заказчиком, бриф, тз

Второй модуль курса. Здесь разбираемся с ключевыми для любого дизайнера темами: пониманием задач бизнеса, коммуникацией с заказчиком, составлением брифа и технического задания (тз). Во втором видео составляем бриф для проекта, над которым мы будем работать на протяжении этого курса.

Ссылки на документы, упомянутые в видео:

3. Основы веб дизайна #3 — Прототипирование (Prototype — Photoshop, Muse, Axure, Online services)

Третий модуль курса — введение в тему прототипирования. Рассмотрим основные понятия, сервисы и программы для создания прототипов. Поговорим в каких случаях прототипы незаменимы, а в каких могут оказаться откровенно вредны.

Сервисы:

Упомянутые программы:

4. Основы веб дизайна #4 — Создание главной страницы

В четвертом модуле от теории переходим к практике — создаем главную страницу. Это самый объёмный модуль курса. Помимо демонстрации рабочего процесса в фотошопе мы поговорим о необходимых инструментах и рассмотрим базовые принципы дизайна.

5. Основы веб дизайна #5 — Страница категории

В пятом модуле демонстрируется процесс создания внутренней страницы сайта (страница категории в нашем случае). Также мы рассмотрим важные моменты, которые необходимо учитывать при разработке внутренних страниц (единство навигации и стиля, понимание структуры и т.д.).

6. Основы веб дизайна #6 — Мобильная (адаптивная) версия

Завершающий, шестой модуль курса познакомит вас с процессом создания адаптивной версии сайта. Здесь вы узнаете только о самых базовых вещах, т.к. тема адаптивного дизайна (и тем более дизайна мобильных приложений) заслуживает отдельного курса (и даже не одного).

На этом всё. Буду рад, если вы напишете в комментариях свои впечатления от курса.

psforce.ru

Подборка уроков по веб-дизайну (Photoshop & Illustrator)

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

Создаем прайс-таблицу в Photoshop 

Прайс-таблицы являются хорошим дополнением для сайтов, которые предоставляют товары или услуги. Такие элементы дают посетителям сайта информацию о цене на продукт.

Перевод

____________________________________________________________________

Диапазон цен в  Adobe Illustrator 

Подобную  шкалу цен вы сможете создать в Adobe Illustrator всего за 19 шагов . Очень просто и понятно.

____________________________________________________________________

Аудиоплеер в Photoshop 

 

Аудио проигрыватели создавать не сложно. но если вы это делаете первый раз, это может вызвать некие трудности.

____________________________________________________________________

Слайдер  в Photoshop 

Урок поможет вам разработать простой стильный слайдер.

Перевод 

____________________________________________________________________

Усилитель с помощью Photoshop

 

Создание подобного интерфейса может вызвать трудности даже у опытных разработчиков. Все элементы управления (кнопки, панели) создаются с нуля.

____________________________________________________________________

Контактная форма в Adobe Photoshop  

____________________________________________________________________

Audio Player Bar в Adobe Illustrator 

 

В этот раз плеер мы будем создавать, использую иллюстратор.

____________________________________________________________________

Создаем мобильный музыкальный плеер 

____________________________________________________________________

Урок по создание дизайна для iOS  приложения (видеоурок)

 

Выполнение видеоурока может занят у вас несколько часов. но конечный результат этого стоит.

____________________________________________________________________

Целевая страница в Adobe Photoshop 

   

Дизайн целевой страницы для мобильного приложения.

____________________________________________________________________

Инфографика с помощью Photoshop CS6  

____________________________________________________________________

Макет в стиле ретро в Photoshop 

 

Для выполнения урока вам может понадобится знание иллюстратора, потому что некоторые фигуры проще будет создавать именно в иллюстраторе.

____________________________________________________________________

Создаем Twitter App  интерфейс в фотошопе 

 

На выполнение урока у вас может уйти достаточно много времени. В нем более 80 шагов. Преимуществом является то, что создание каждого элемента детально описывается.

____________________________________________________________________

Дизайн целевой страницы

Перевод

____________________________________________________________________

Макет бизнес-сайта в Photoshop CS6 

____________________________________________________________________

Были использованы материалы подборки Ada Ivanova

Смотрите также:

Подборка Photoshop-уроков по веб-дизайну

www.dejurka.ru