Приемы фотошопа для верстальщика Георгий Михайлов верстальщик Georgiy.Mikhailov@softline.ru. - презентация

1 Приемы фотошопа для верстальщика Георгий Михайлов верстальщик

2 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Содержание – Формат презентации Приемы работы с фотошопом глазами верстальщика Хот-кеи Доп. Настройки Маленькие хитрости и советы по верстке страниц Приемы, технологии, правила

3 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Хот-кеи Ускоряем работу: Хот-кеи для верстальщика ИнструментХоткей Копирование/вставкаCtrl+C, Ctrl+V, Ctrl+X, Ctrl+Shift+V Пипетка/линейкаI, Ctrl-I Crop - обрезкаС Select - выделениеM, Shift+M КомментарииN Сомкнуть слоиCtrl+E, Ctrl+Shift+E Быстрое панорамирование/простоеSpace, H Быстрый ЗумCtrl+Space [+], Alt+Space [-], Ctrl+(-), Ctrl+(+)

4 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Моторрр, Экшн! Бывают случаи, требующие выполнения одинаковых действий над одним или группой файлов. Есть решение! (Alt+F9) 1.Создание набора действий 2.Воспроизведение и присоединения действий 3.Добавление команды «Стоп» 4.Остановка и продолжение работы 5.Редактирование команд 6.Включение/выключение диалогового окна 7.Пакетная обработка 8.Автоматическое сохранение промежуточных версий

5 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Маски… (если дизайнер налажал и смержил слои) Эффективное маскирование сложной формы (например волос) 1.Лассо – не наш путь! 2.Отделяем зерна от плевел изображение от фона a)Работа с каналами b)Работа с curves/levels/Apply Image 3.Используем полученную маску по назначению 4.Альтернативы 1.Background Erazer 2.Extract (filters>extract) – маски – маски – слои

6 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Маски… (если дизайнер налажал и смержил слои)

7 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Прозрачность под контролем! Проблема определения степени прозрачности пикселя

8 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Прозрачность под контролем! (2) Ctrl-click на слое, сохранить как канал, Ctrl-D (снять выделение), перейти на созданный канал, Ctrl-L (Levels), правый ползунок влево до упора, Ctrl- Alt-L (повторяем Levels), Ctrl-I (Invert), Ctrl-click на канале - выделены все полностью прозрачные пиксели. Если в Levels правый ползунок двинуть влево и не инвертировать результат, то получим выделение всех полностью непрозрачных пикселей. Levels можно заменить на Threshold.

9 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Пилим интерфейс (1) Зумирование колесом (Ctrl+k)

10 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Пилим интерфейс (2) Настройка хот-кеев под себя (Alt+Ctrl+Shift+k)

11 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Сохраняяяя…ем JPG vs PNG vs GIF Цветовой профиль в изображении Оптимизация графики RIOT, PNGout

12 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Приемы верстки – маленькие секреты 1.Концепция быстрой записи БЭМ от Яндекс (Блок, Элемент, Модификатор ) Zen Coding от Яндекс - HTMLкодинг со скоростью света высокопроизводительное кодирование и редактирование текстов в форматах HTML, XML, XSL, а также других структурированных форматов. (Сергей Чикуенок, 2009) Блоком называется некая самодостаточная сущность, которая может быть использована отдельно от других блоков. Блоки могут быть простые и могут использовать другие блоки внутри себя. Блоки могут быть как визуальные, так и невизуальные. Элемент это часть блока, которая вне этого блока не имеет смысла, не может быть использована вне контекста этого блока (если может, то это уже блок и её надо оформлять как блок). Модификатор это дополнение к блоку или элементу, которое меняет его поведение или внешний вид. Модификатор имеет тип и значение. Одновременно может использоваться несколько модификаторов разного типа. Уровень переопределения содержит описания блоков. Каждый последующий уровень переопределения может добавить новые блоки, изменить имеющиеся (перекрыть заданные ранее параметры блока или добавить новые технологии реализации блока). div#page

13 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Приемы верстки – маленькие секреты (2) 3.Библиотека готовых элементов Кнопки, иконки, базовые макеты страниц, js-фреймворки и проч… 4.Библиотека решений сложных проблем Верстка рассылок, интеграция нестандартных шрифтов и проч… 5.Внутренний стандарт (ооо) 6.Использование IDE Связь с репо, включение zen coding, подсветка кода, ведение проекта и проч… 7.Пишите красиво! (краткие записи)

14 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Рекомендуемые материалы

15 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ СЕРВИСЫ ОБУЧЕНИЕ КОНСАЛТИНГ Россия, Азербайджан, Армения, Беларусь, Грузия, Казахстан, Кыргызстан, Таджикистан, Туркменистан, Узбекистан, Украина, Монголия, Турция, Венесуэла, Вьетнам, Иран, Египет Спасибо за внимание! Вопросы ?