Графический редактор

Loading...

En provenance du cours de Moscow Institute of Physics and Technology

Тонкости верстки

70 notes

Moscow Institute of Physics and Technology

Тонкости верстки

70 notes

Cours 3 sur 5 dans Specialization Разработка интерфейсов: вёрстка и JavaScript

Этот курс продолжает обучение тех, кто уже познакомился с основами HTML и CSS. На очереди всякие изыски: отображение сложных элементов, изучение различий между браузерами и графика. В конечном итоге вы сможете сами сверстать страницу любой сложности. Авторы курса — разработчики из Яндекса.

À partir de la leçon

Фотошоп и графика

Вы научитесь работать с изображениями и графикой. Узнаете о цветовых моделях, форматах изображений в вебе и как их оптимихировать. Итоговая практическая работа — сверстать с нуля макет.

Графические форматы4:56

Цветовые модели6:14

Форматы графических файлов7:30

Архивация и компрессия2:00

Графический редактор2:26

Графика в HTML6:28

Градиенты3:04

Спрайты и base644:53

Rencontrer les enseignants

Олег Семичев
разработчик интерфейсов, Яндекс
Артем Кувалдин
разработчик интерфейсов, Яндекс
Мохов Олег
разработчик интерфейсов, Яндекс

Здравствуйте!

В этом видео я хочу рассказать вам про основные функции для работы с макетами в

программе Adobe Photoshop.

Также есть и другие графические редакторы для работы с макетами,

но основные два из них — это Adobe Photoshop и Sketch.

Но сегодня я расскажу вам про Adobe Photoshop.

Итак, о чем стоит подумать при работе с макетом?

Первое: нужно всегда думать о структуре будущей верстки, то есть то,

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

Также стоит задуматься о деградации, то есть если ваш сайт

взрывается в каких-то старых браузерах, то лучше это починить.

Сайт, конечно, может не работать,

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

Также стоит задуматься о шрифтах, которые используются в макете.

Если там используется слишком много каких-то своеобразных шрифтов,

которых нет в операционных системах, то стоит задать этот вопрос дизайнеру,

а нужно ли использовать эти шрифты.

Также нужно всегда проверять верстку на реальных данных,

поскольку в макетах данные могут быть не совсем реальные.

Например, в качестве имени пользователя может быть имя Ваня,

хотя это имя очень короткое, бывают имена намного длиннее, и стоит проверить на них.

Очень важно соблюдать отступы, потому что дизайнер, разрабатывая макет, учел,

какие лучше всего использовать размеры и отступы.

Если контент не влазит в определенные блоки,

то лучше подойти к дизайнеру и обсудить с ним этот вопрос.

Для работы с макетом также очень удобно использовать расширение для

Chrome и Firefox под названием PixelPerfect.

Он позволит вам сверстать страницу наиболее точно.

Это приложение позволяет вам наложить поверх вашей верстки картинку,

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

Браузеры Firefox и Chrome позволяют выбрать цвет.

Если кликнуть на значок цвета, то открывается специальная панель, где

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

Также можно воспользоваться значком пипетки для того,

чтобы выбрать цвет со страницы.

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

Adobe Photoshop и какие расширения помогают верстать.

В следующем видео я расскажу вам о том, как вставлять изображение в HTML и в CSS.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play