8 полезностей в Photoshop для быстрой верстки сайта

photoshope-verstka-saita-gtalkkz

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

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

Не будет тянуть кота за хвост, и начнем, пожалуй :neutral:

Горячие клавиши Фотошопа.

Горячие клавиши в любой программе уменьшают ваше драгоценное время. Поэтому запоминайте их. Чтобы Вам было легче, посмотрите основные полезные горячие клавиши.

Если Вам этого мало, то наберите в google горячие клавиши фотошопе и запоминайте их.

Необходимый набор.

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

Откройте фотошоп, создайте новый документ (ctrl + N), выберите размеры вашей превью картинки (у меня 200 на 200 пикселей), нажмите «Сохранить набор параметров…».

Фотошоп. Верстка сайта

Теперь придумываем название: «200 пикс х 200 пикс», либо «Превью блога» и т.д. и жмите ok.

Теперь чтобы создать документ (ctrl + N) размеров 200 на 200 пикселей, мне достаточно выбрать соответствующий набор.

Фотошоп. Создание набора для превью картинки

Расстояние и размеры элементов в фотошопе.

Есть несколько способов определения расстояния между блоками и блоков. Рассмотрим наиболее оптимальные.

Первый способ. Выбираем инструмент «Прямоугольная область» (М) и выделяем необходимый блок.  Смотрим во вкладку «Инфо» в Photoshop.Фотошоп. Размеры блоков

Таким же способом определяем расстояние между блоками.

Второй способ. Также расстояние можно измерить с помощью инструмента «Линейка». Не забывайте зажимать Shift для прямой линии линейки. Минус данного способа: необходимо определять ширину и высоту по отдельности.

Верстка сайта: опредилить размеры блоков

Другие способы: Также можно выделить элемент, скопировать и при создании нового документа записать размеры. Узнать размер текущего документа можно в левом нижнем углу.

Цвет в фотошопе.

Узнать цвет очень просто.

Первый способ. Выбираете инструмент «Пипетка» и кликайте на необходимый элемент. В блоке «Инструменты»  появится выбранный цвет. Кликайте по квадрату с цветом.

Фотошоп. Блок инструменты

И копируйте цвет в нужном формате.Верстка сайта фотошоп: определить цвет текста

Второй способ. С помощью специальных программ. Например, Pixie. Для этого необходимо навести на объект и записать нужный формат цвета.

Для текста. Можно использовать вышеописанные способы, но лучше активировать текст: выберите инструмент «Горизонтальный текст» (Т) и нажмите на текст, в блоке «Параметры» вы увидите цвет текста, а также другие параметры шрифт, размеры, жирность и т.д.

Фотошопе: как определить цвет текста

Рабочая среда в фотошопе.

При написании разметки сайта, когда уже фотошоп нужен лишь чтобы смотреть размеры и как должен выглядить сайт, многие блоки в фотошопе нам, в принципе, не нужны. Можно и нужно их убрать. Для этого давайте создадим новую рабочую среду в photoshop’e.

Закройте все ненужные окна: нажмите на крестике соответствуюшего блока, либо Окно  ->Уберите галочку.

Фотошоп: Новая рабочая среда

Нажмите на стрелочки в правом верхнем углу (показано на картинке) и выберите строку «Новая рабочая среда…». Придумайте название и сохраняйте. Теперь при щелчке на нужную среду будет изменяться настройки отображения блоков в фотошопе. Очень удобно.

Новая рабочая среда в фотошопе

Прозрачность слоев.

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

верстка сайта: фотошоп - прозрачность слоев

При сохранении непрозрачности слоя, я обычно создаю новый пустой слой и объединяю (ctrl +E) с необходимым. При этом сохраняются необходимые настройки слоя и растет КПД )).

Выбор необходимого слоя.

Для автоматического выбора слоя/элемента по которому вы кликаете необходимо сделать следующие действия в программе:

Верстка сайта.Фотошоп.Автовыбор слоя

Установить галочку на «Автовыбор», и из выпадающего селекта «Группа слоев». Теперь по клику элемента в блоке «Слои» будет выделяться нужный вам слой.

Оптимизированное сохранение изображения

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

Запомните волшебную комбинацию: ctrl + shift +alt +s. Как бы длинно это не смотрелось, нажимается очень просто и легко. Конечно, вы можете переназначить данную функцию «Сохранить для Web и устройств».

Фотошоп: Сохранить как для Web и устройств
Предварительный просмотр картинки у меня стоит на 4 вариантах. Одна область для исходного изображения, остальные можно поменять для gif, jpeg и png форматов. Посмотреть какой весить легче и при этом качество не теряется (для этого сравниваем с исходным изображением). Если в общем то png и gif для мелких и прозрачных элементов, для простых картинок можно jpeg в высоком или среднем качестве. Понажимайте и выберите, что получше.Если вас не устраивают размер, то вы тут же можете их поменять (справа внизу). При изменении непропорционально нажмите на значок справа от размеров.

Нажимайте «Сохранить» и пользуйтесь оптимизированными картинками для вашего сайта.

А какие фишками вы поделитесь? Отписывайтесь в комментариях и делитесь с друзьями через социальные кнопки. :???:

с/у УтБ

***

Думаете над созданием собственного бизнеса? Магазин готовых бизнес планов предлагает свои услуги по разработке и знакомству с бизнес планами разных сфер.

На десерт сегодня девушка читает rap ;)

Комментарии к статье

  • #

    Я тоде верстальщик, стало интересно почитать, что да как делают другие) Оказалось, делают все то же самое, что и я )))

    • #

      самое интересное никто не раскрывает ;)

  • #

    Ахах, жесть ) Я в фотошопе сижу по 3 ч в день ,теперь буду сидеть видимо больше , спасибо большое!

  • #

    Кстати, о подрастающем поколении: спасибо за статью. мне понравилось, буду совершенствовать свои навыки фотошоп :wink:

  • #

    по моему тут все тупо видео смотрели

    • #

      Обижаете :( Хотя видео крутое не поспоришь ;)

  • #

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

    • #

      Все для подрастающего поколения :)

  • #

    Про верстку: я такую работу в фотошопе не выдержу…

    • #

      почему?)) все просто, тяжело только в начале пути)
      Про видео да, девушка молодец ;)

      • #

        “не мое” это, да еще в цветах путаюсь :(

  • #

    Это круто! Я про видео :mrgreen: