photoshop для верстальщика. Фотошоп для верстальщика


Photoshop для кодера

Photoshop — это один из незаменимых инструментов каждого верстальщика. Photoshop позволяет:

  • нарезать графику для верстки
  • измерять размеры блоков и растояния между ними
  • узнавать точные значения цветов, имена и размеров шрифтов
  • и многое другое

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

Данный раздел — это путеводитель кодера в "лесу" возможностей Photoshop.

  • PNG-24. Разделяем изображение на PNG-8 и PNG-24

    добавлено 05.08.2011

    Разделив PNG-24 на две части: PNG-8 и PNG-24, можно добиться внушительного сокращения веса графического файла.

  • PNG-24. Устраняем лишнюю информацию

    добавлено 16.07.2011

    Уменьшаем вес изображения PNG-24, устраняя баг Photoshop с невидимыми фрагментами.

  • Вырезаем рамку неправильной формы (лассо)

    добавлено 21.01.2011

    Видеоурок. Разные типы лассо помогут вырезать рамку произвольной формы.

  • Вырезаем внутреннюю часть скругленной рамки

    добавлено 15.01.2011

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

  • 8. Базовая оптимизация JPEG

    добавлено 17.09.2010

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

  • Ошибка «scratch disk are full»

    добавлено 17.09.2010

    При открытии тяжелых макетов может возникнуть ошибка «sratch disks are full». Читаем что это и как исправить.

  • 7. Оптимизация GIF и PNG-8

    добавлено 01.09.2010

    оптимизация gif и png-8Учимся получать изображения в форматах GIF и PNG-8 с минимальным весом при сохранении приемлемого качества.

  • 6. Сохранение изображений для веб

    добавлено 16.07.2010

    скучающий пользовательНе заставляй пользователя ждать. Оптимизируй картинки.

  • 5. Нарезка графики

    добавлено 03.04.2010

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

    Работа со слоями: поиск нужного, склейка слоев.

    История операций — варианты отмены действий.

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

    Сборка в цельную картинку из нескольких слоев.

    Как вырезать кусок картинки любой формы.

    Трансформация изображений.

  • 4. Параметры текста

    добавлено 20.03.2010

    В данном уроке показано как из макета получить основные параметры шрифта: цвет и выравнивание текста, имя, стили, размер шрифта, межстрочное расстояние.

  • 3. Размеры и расстояния

    добавлено 15.03.2010

    Учимся определять размеры, расстояния и цвета в Photoshop.

  • 2. Готовим Photoshop к работе

    добавлено 08.03.2010

    готовим photoshop к работеЧтобы начать извлекать полезную информацию из макета, верстальщику необходимо настроить Photoshop под свои нужды. Учимся В данном уроке научимся убирать направляющие, изменять единицы размеров блоков, менять размеры шрифтов из pt в px.

  • 1. Знакомство с Photoshop

    добавлено 05.03.2010

    знакомимся с photoshopКраткий обзор функций Photoshop, на которые следует обратить внимание верстальщику.

xiper.net

Как стать начинающим верстальщиком

Привет, читатель!

В этой статье я расскажу как стать начинающим верстальщиком. Т.е. после выполнения всех рекомендаций в можете претендовать на данную позицию. Статья создана специально для учеников glivera-team, но может помочь всем, кто решил освоить данную специальность.

Учим HTML/CSS

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

После прохождения уроков вы должны понимать:

  • что такое html-теги и как они работают
  • блочную модель(border, margin, padding)
  • как работают float, inline-block
  • позиционирование(абсолютное, относительное, фиксированное, z-index)

Вы должны уметь:

  • вставить на страницу текст, картинки, ссылки, элементы форм
  • стилизовать элементы страницы(изменение размеров, цветов, теней и т.д)
  • создавать таблицы

Работаем с фотошопом

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

  • работа со слоями(скрытие, отображение, просмотр эффектов)
  • замер размеров элементов
  • вырезание картинок(обычных и паттернов)
  • копирование текста из макета в html

Полезные ссылки:

Начальные инструменты

Для быстрого старта вам понадобится редактор и браузер. Вы можете выбрать любые, но я посоветую Sublime Text в качестве редактора и Chrome в качестве браузера. Из операционных систем сделайте выбор между Windows и Mac. Остальные системы будут тормозить ваше обучение.

Верстка первого сайта

На этом этапе скорее всего вы ощутите ступор. Вы вроде знаете html/css(на самом деле нет) и фотошоп. Но вы совершенно не понимаете как из макета сделать сайт. В данном случае вы можете пройти небольшой курс по верстке сайта, коих много на ютубе. На данном этапе вам нужно сверстать первый сайт. Не обращайте внимание на такие понятия как резина, адаптивность. И еще, не используйте css-фреймворки(bootstrap, foundation).

Полезные ссылки:

Понимание семантики, валидность

Итак, вы сверстали первый сайт, что дальше? Вам нужно понять как правильно расставлять теги в html-коде, а также научиться проводить валидацию. С валидацией все просто - машина анализирует код, говорит что не так, вы правите и понимаете. С семантикой посложнее, поскольку область довольно холиварная и во многих моментах разработчики не имеют единого мнения. Но все же общие стандарты есть. После того, как изучите - попробуйте сверстать новый макет семантично. Теперь на каждом этапе вам нужно получить обзор вашего кода от опытного специалиста/наставника.

Полезные ссылки:

Javascript и jQuery

На этом этапе вы должны понять, что такое Javascript и зачем он нужен. Далее познакомиться с библиотекой jQuery и попробовать сверстать сайт с интерактивными элементами(слайдеры, всплывающие окна, табы).

Полезные ссылки:

БЭМ

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

Полезные ссылки:

SASS

Для ускорения и удобства написания стилей придумали препроцессоры. Наш выбор - Sass(.scss). Вам необходимо изучить препроцессор и сверстать с ним новый макет. Понять нужно:

  • переменные
  • разница между миксинами и тихими классами(placeholder)
  • как работает ‘&’
  • как разделить стили на несколько .scss файлов

На данном этапе scss в css компилируйте с помощью prepros

Полезные ссылки:

Jade

Также для ускорения верстки и поддержки верстальщики используют шаблонизаторы html. Наш выбор - jade. После изучения вы должны понимать:

  • как делать миксины
  • как работает extends
  • циклы и переменные
  • работа с массивами

Верстаете сайт с применением шаблонизатора.

Полезные ссылки:

Адаптивность

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

Полезные ссылки:

IDE PHPStorm

Чем раньше вы пересядете с редактора на PHPStorm - тем лучше. Эта IDE позволяет значительно ускорить разработку. Скачать бесплатную(early access) PHPStrom можно на официальном сайте, если не хотите платить - скачиваете её раз в месяц. В остальном бесплатная версия такая же, как и платная.

Полезные ссылки:

Git

Любой разработчик должен уметь работать с системами контроля версий, и верстальщик - не исключение. Мы, как и большинство выбрали Git. Вы должны уметь следующее:

  • работать с интерфейсом github
  • уметь клонировать репозитории на компьютер
  • делать commit, push, merge
  • делать pull request

Полезные ссылки:

Практика

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

На этом все.

glivera-team.github.io

photoshop для верстальщика YouTube

Видеоурок фотошоп (photoshop) для верстальщика и начинающих

2 г. назад

https://youtu.be/-FDvH-oFruQ Данный видеоурок содержит базовые знания по работе с программой фотошоп и в первую очередь...

Научись верстать сайты с нуля. Урок 3. Работа в фотошоп для верстальщика

1 г. назад

Научись верстать сайты с нуля. Урок 3. Работа в фотошоп для верстальщика.

Основы Photoshop за 10 минут для web разработчика

1 г. назад

Основы Photoshop за 10 минут для web разработчика Каждый web разработчик должен уметь работать с фотошопом, в этом...

секреты photoshop для верстальщика

3 г. назад

автоматизация по вырезанию элементов из макета.

3.1 Нарезка картинок в Photoshop для верстки сайта. Создание сайта из PSD

8 мес. назад

Нарезка картинок в Photoshop. Часть 1. (3.1) https://www.youtube.com/watch?v=CY4GkkzzmMc&list=PLmaZf_calrAZUoTV8is6H5BRxmq4brSwe&index=3 ...

Фотошоп для верстальщика – настройка рабочей области. Photoshop для верстки

1 мес. назад

Как настроить рабочую область в Фотошопе для верстальщика. Уберите всё лишнее и оставьте только то, что...

Photoshop для web разработчика. Урок 1. Знакомство с Adobe Photoshop

1 г. назад

Полный видео курс-https://itvdn.com/ru/video/photoshop?utm_source=yb_full_photo В первом уроке курса вы познакомитесь с Adobe Photoshop и его...

Фотошоп для верстальщика. Photoshop для верстки. Часть 2

4 нед. назад

Как нарезать макет в Фотошопе для верстальщика. Из PSD в HTML и CSS. Замеры расстояний, работа со шрифтами, нарезк...

Настройка Photoshop под нужды верстальщика

3 г. назад

Photoshop CC2015 + CSSHAT в обновленном плейлисте Воркфлова ...

Как подготовить макет сайта для верстки, для верстальщика

3 г. назад

Бесплатно учись веб-дизайну – http://vk.cc/3PERqX Блог о веб-дизайне и интерфейсах – http://maximsoldatkin.com Я Вконтакте –...

Быстрая нарезка psd макета для верстки.

1 г. назад

Всем привет. В данном видео я расскажу вам ка вы можете быстро нарезать psd макет для верстки. Нарезка макета...

Основы Photoshop для веб-дизайнера Урок 1 - 5 важных настроек фотошопа и создание кнопки

3 г. назад

Из этого видео вы узнаете, как правильно настроить фотошоп для веб-дизайна и как создать простейшую кнопку....

Настройка Photoshop для верстки HTML

2 г. назад

Быстрая настройка программы Photoshop для "резки" макетов PSD.

Экспорт графики для веба, Виталий Зюзин — HTML Academy

11 мес. назад

Виталий Зюзин, преподавать онлайн-интенсива «HTML и CSS, уровнь 1», рассказывает о том, как правильно экспортиро...

Основы PHOTOSHOP Для Веб-Дизайнеров [Большой Урок]

1 г. назад

Большой урок-мастер-класс по основам Photoshop для веб-дизайнеров. Разберем инструменты и море полезных фишек....

Подготовка дизайна для верстальщика

8 мес. назад

Внимательно смотрите вступление перед комментированием этого видео. Всем мира . Веб-сайт: http://filippova-landing.ru...

Обзор моей рабочей среды Adobe Photoshop для веб-дизайна (Настройки, InVision Craft, FontAwesomePS)

2 г. назад

Надежный хостинг с 30% скидкой (по коду PRAZDNIK): http://goo.gl/WsXgde Полезно? Подпишись на канал: https://goo.gl/o1TVqF Создание...

Сократи время своей верстки в 3 раза

4 г. назад

Портал видеоуроков http://loftblog.ru/ Фильтр новостей в мире web разработки: http://vk.com/itloft Также в facebook: http://www.facebook.com/loft...

Avocode – замена Photoshop. Урок 0

3 г. назад

Avocode - это мост между дизайнером и веб-технологом (то есть верстальщиком). На сегодняшний день это один из...

Photoshop - готовим макет для html-верстальщика

5 г. назад

Cайт: http://promo-creative.com/ Не обязательные, но крайне желательные мероприятия, которые следует выполнять, когда...

syoutube.ru


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