В Интернете существует (на момент написания статьи) мало материалов с примерами как нарезать макет в Photoshop. Для новичков-верстальщиков этот факт является камнем преткновения.

И хотя на форумах, посвященных web-дизайну, много говориться о том, что … да там все просто - нечего учитьcite>, … в сети полно информации по этому вопросуcite>, но на самом деле это не совсем так. Я могу судить об этом по самом себе. Мне потребовалось немало времени, чтобы самому разобраться и докопаться до процесса нарезки.

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

Итак, у нас имеется psd-макет, созданный неким “гением” web-дизайна:

Макет сайта

Как и положено, макет представлен в формате psd (в исходном коде) со всеми слоями так, как нарисовал его дизайнер.

Нам необходимо вырезать логотип будущего сайта. В данном случае это красивая цветастая напись POLO360. Видим, что логотип состоит из двух текстов - самого POLO360 и нижней строки “My kind of business blog”. Также имеется некое графическое изображение (слева от надписи), которое также является частью логотипа. В сумме все эти объекты являются одним целым и представляют логотип сайта.

Вот нам и предстоит задача вырезать его. Первым и самым трудным делом является нахождение всех слоев, отвечающих за прорисовку логотипа. Для этого нужно выбрать инструмент “Move Tool (V)”. В панели инструментов Photoshop необходимо проверить, что стоит галочка в разделе “Auto - Select”:

Auto Select Photoshop

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

Теперь начинается самое интересное. Если дизайнер человек ответственный и пунктуальный, то перед передачей макета на верстку он рассортирует все слои по папкам. Каждая из папок будет однозначно указывать и содержать в себе все слои, отвечающие за отрисовку только одного объекта. И жизнь верстальщика значительно упрощается.

Но такое бывает редко и слои разбросаны по палитре как попало. нам необходимо методом “научного тыка” найти нужные нам.

Для этого открываем (если еще не открыли) Палитру слоев и пробуем отключать или включать отображение слоя, щелкая мышью на значке “глаза” слева от названия слоя. Тем самым, мы проверяем, входит ли этот слой в состав нужного объекта или нет. Как только находим нужный слой, то отмечаем его цветом, чтобы потом не потерять.

Когда все слои найдены, картина в “Палитре слоев” будет примерно такой:

Selected Layers

Теперь объединяем отмеченные нами слои. Для этого держим зажатой клавишу Ctrlkbd> и выделяем каждый из слоев одинарным щелчком мыши. Получаем следующую картину:

Выделенные слои

Далее необходимо объединить выделенные слои в один. Другими словами, мы сведем нужные нам слои в один и в результате изображение (в нашем случае - логотип) будет цельным. Только так мы можем вырезать его впоследствии. Для объединения слоев щелкаем правой кнопкой мыши на любом из выделенных слоев и в открывшемся контекстном меню выбираем “Merge Layers”:

Merge Layers

Видим такую картину:

Объединенный слой

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

Выбираем в панели инструментов “Rectangular Marquee Tool(M)” и обводим логотип произвольным прямоугольником:

Выделенный логотип

Теперь копируем выделенную нами область - нажимаем на клавиатуре комбинацию клавиш Ctrl+C.

Создаем в Photoshop новый документ - нажимаем Ctrl+N. Откроется новая вкладка с диалоговым окном настройки создаваемого документа:

Photoshop - создание нового документа

Здесь самым важным является поле “Preset”. В его значении должно стоять “Clipboard (Буфер обмена)”. Если все было сделано правильно, то Photoshop автоматически создаст новый документ с размерами той области, которую мы скопировали. Размеры программа возмет из “Буфера обмена”, куда была помещена выделенная нами область. Остальные параметры для нас неважны. Нажимаем ОК.

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

Photoshop - новый документ почти создан

Нам осталось вставить в этот документ выделенную область, которая все еще находится в “Буфере обмена”. Для этого нажимаем на клавиатуре Ctrl+V. Результат:

Вставленная в новый документ область

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

Однако, белый фон остался. А он нам совсем не нужен. Это делается очень просто. Переводим взгляд на “Палитру слоев”” и видим там всего два слоя: “Layer 1” и “Background”. Слой “Layer 1” - это вставленная нами область, а “Background” - фоновое изображение. Щелкаем мышью на значке “глазика” напротив слоя “Background”:

Отключенный фоновый слой

Само изображение в окне Photoshop изменилось - вместо белого фона появилась шахматная “доска”. Это говорит о том, что фоновый слой у нас теперь прозрачный.

Теперь нам осталось только сохранить отредактированное изображение. Переходим в меню “File - Save for Web”:

Сохранение для Web

Здесь нам нужны два поля.

Верхнее - для выбора формата сохраняемого файла. В Интернете имеются подробные описания, как выбрать нужный формат. На самом деле все просто. Формат GIF имеет поддержку прозрачного фона, но не имеет поддержки передачи градиентов. Формат JPEG наоборот, хорошо передает плавные переходы цветов (градиент), но у него отсутствует прозрачный фон. Формат PNG-8 очень похож на GIF, только имеет лучший алгоритм сжатия. Формат PNG-24 имеет как поддержку градиентов, так и прозрачный фон (по другому называется - прозрачные пиксели). В нашем случае нам нужен как градиент, так и прозрачный фон, поэтому выбор однозначен - PNG-24.

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

Все, сохраняем файл с выбранными настройками и задаем ему имя -

1
logo.png
.

На этом обзор примера нарезки макета в программе Photoshop заканчиваю. Думаю, он был достаточно полным и понятным.


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

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

Это также может делать и Clonezilla. Дальше – шаги по установке дистра на флешку или hard disk из Windows.

Как установить Clonezilla на USB

  • Выбираем и скачиваем Clonezilla Live USB файл для USB (образы для флешки жесткого диска имеют расширение
    1
    
    .zip
    )
  • Скачиваем утилиту “HP-USB Format Tool”. С ее помощью можно отформатировать флешку\диск в файловую систему FAT\FAT32 и сделать загрузочной. Это может помочь, если штатные средства Windows не могут сделать ее таковой
  • Распаковываем архив Clonezilla Live Zip на съемный носитель
  • Переходим на съемный флешку\диск с уже распакованной на ней Clonezilla Live Zip, заходим в
    1
    
    utils\win32
    и запускаем
    1
    
    makeboot.bat

Осторожно! Запускать файл

1
makeboot.bat
нужно только на флешке или съемном жестком диске (где он и должен лежать после распаковки Clonezilla Live Zip)! Запуск его на локальном жестком диске приведет к тому, что Windows перестанет грузиться!

  • Перезагружаемся выставляем в меню BIOS’а загрузку с “USB HDD” или выбираем в “Загрузочном меню BIOS” тот же пункт (у меня – вход в “Загрузочное меню BIOS” – F12)
  • Происходит загрузка Clonezilla USB
  • Следуем пошаговым инструкциям wizard‘а

На этом все.


Установка и настройка загрузчика SLiM операционной системы ArchLinux.

Почему именно этот загрузчик? Потому что он полностью отвечает философии этой системы - прост, легок, минимален в настройках. И к тому же красив. Это хорошая альтернатива стандартному

1
gdm
.

Дефолтная тема имеет вид:

Default SLiM Theme

Тема состоит из трех файлов:

  • фоновая картинка (background image), может быть формата .png или .jpg;
  • картинка панели (panel image), также формата .png или .jpg;
  • строка ввода (input box) и приветствие (slim.theme).

Имеется возможность самому править готовые темы. В репозиториях ArchLinux имеются сборки тем.

Посмотрим их:

$ sudo pacman -Ss slim themes
  extra/archlinux-themes-slim 1.2-1
  Arch Linux themes for the SLiM login manager
  extra/slim-themes 1.2.3-3
  Themes Pack for Simple Login Manager

Установка этих тем стандартная для Arch:

$ sudo pacman -S archlinux-themes-slim slim-themes

Все темы автоматически распаковываются в директорию

1
/usr/share/slim/themes/
.

$ ls /usr/share/slim/themes/
  archlinux-darch-grey archlinux-simplyblack debian-moreblue flat lake parallel-dimensions rear-window wave
  archlinux-darch-white archlinux-soft-grey default flower2 lunar previous scotland-road zenwalk
  archlinux-retro capernoited fingerprint mindlock rainbow subway

SLiM поддерживает сторонние темы. Для установки таких тем сперва нужно скачать ее, а затем распаковать в директорию с темами. Все темы находятся по пути

1
/usr/share/slim/themes/
.

Пример установки сторонней темы

  1. Скачиваем понравившуюся по ссылке, указанной на домашней странице проекта -

    1
    
    slim.berlios.de/themes
    . Пусть это будет тема
    1
    
    10th birthday of Gentoo (Blue)
    .

  2. Создаем для скачанной темы папку

    1
    
    gentoo_blue
    по пути
    1
    
    /usr/share/slim/themes/
    :

$ sudo mkdir /usr/share/slim/themes/gentoo_blue
  1. Распаковываем туда архив темы:
$ sudo tar xjvf ~/Downloads/gentoo_10_blue.tar.bz2 -C /usr/share/slim/themes/gentoo_blue/
  background.jpg
  panel.png
  slim.theme
  1. Проверяем, туда ли все распаковалось:
$ ls /usr/share/slim/themes/gentoo_blue/
  background.jpg panel.png slim.theme
  1. Теперь открываем конфигурационный файл SLiM, находящийся по адресу
    1
    
    /etc/slim.conf
    :
$ sudo nano -w /etc/slim.conf
  1. Находим в конце файла строки:
# current theme, use comma separated list to specify a set to
# randomly choose from
current_theme default

и меняем значение строки

1
current_theme
с
1
default
на название папки со скачаной и распакованной темой, то есть, в нашем случае это папка
1
gentoo_blue
:

# current theme, use comma separated list to specify a set to
# randomly choose from
current_theme gentoo_blue
  1. Сохраняем результат и выходим из редактора. Перезагружаемся и видим результат:

Gentoo SLiM Theme

Скриншот экрана приветствия\входа в систему можно сделать, нажав кнопочку F11kbd>. Скрин будет сохранен в формате

1
.png
с именем
1
slim
в корневой папке:

$ ls /slim.png
  /slim.png

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

1
imagemagick
.

P.S.

Можно настроить так, чтобы тема выбиралась случайно из набора. Для этого нужно в конфигурационном файле

1
/etc/slim.conf
в строке
1
current_theme
прописать через запятую список тех тем, которые мы хотим видеть.

Например, так:

  # current theme, use comma separated list to specify a set to
  # randomly choose from
  current_theme archlinux-simplyblack,archlinux-soft-grey,archlinux-darch-grey,archlinux-darch-white,archlinux-retro

В предыдущей статье, посвященной вопросу автообновления страниц в окне браузера, я упоминал об плагине для редактора Sublime Text 2 под названием LiveReload. Сегодня я вернусь к этому вопросу и выполню установку этого плагина. Она проста - там нет ничего сложного.

Итак, приступаем к установке и настройке LiveReload в Sublime Text 2.

Первое, что необходимо сделать, это установить менеджер пакетов в редакторе. Установка пакетов в Sublime Text может выполняться двумя способами - вручную или же автоматически. Последний способ более простой и удобный, поэтому воспользуюсь им.

Установка менеджера пакетов

Открываем Sublime Text и переходим в меню по пути “View - Show Console” или же нажимаем сочетание клавиш

1
Ctrl + \
, затем копируем и вставляем нижеприведенный код в окно консоли:

import urllib2,os; pf=’Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20′)).read()); print(‘Please restart Sublime Text to finish installation’)

Жмем Enter и затем закрываем и снова открываем Sublime Text, чтобы изменения вступили в силу. Менеджер пакетов установлен.

Установка LiveReload

Переходим к установке плагина LiveReload в Sublime Text 2. Переходим в меню по пути “Preferences - Package Control”:

Sublime Package Control

В менеджере пакетов выбираем из списка пункт “Package Control: Install Package”:

Sublime Install Package

Немного подождем, пока загрузится список пакетов. Затем в окне поиска введем имя пакета - “LiveReload”:

Sublime LiveReload

Жмем Enterkbd> - пара секунд и плагин установлен. Снова перезагружаем редактор, чтобы изменения вступили в силу:

Sublime Restart

Установка расширения LiveReload в Chrome

Плагин LiveReload работает совместно с одноименным расширением, которое устанавливается в браузер. В моем случае это будет Google Chrome. Приступаю к установке.

В настройках Chrome перехожу в раздел с расширениями и ввожу в строку поиска имя плагина - “LiveReload”:

Установка LiveReload в Google Chrome

Соглашаюсь со всем и жму кнопочку “Установить”. Перезагрузки браузера не требуется - в панели инструментов сразу появляется значок расширения в виде двух круговых стрелочек.

Установка расширения произведена.

Тестирование плагина LiveReload

Открываю в Sublime Text 2 редактируемый HTML-файл. И открываю его же в браузере Google Chrome. Нажимаю мышью на значок расширения LiveReload в панели инструментов и вижу в строке статуса следующее:

Sublime LiveReload Connected

Это говорит о том, что плагин в редакторе Sublime Text 2 успешно подключился к плагину LiveReload в браузере. Можно приступать к работе. Изменяю код в файле, сохраняю изменения и вижу, как они автоматически применились в окне Chrome.

Заключение

Применение плагина LiveReload мне кажется более удобным, нежели расширения, рассмотренные в предыдущей статье. Хотя бы тем, что изменения автоматически вступают в силу, не нужно ждать даже 1 секунды. Главное, не забыть нажать сочетание клавиш Ctrl + S. Вот если бы и этого не нужно было делать, было бы совсем замечательно!.

На этом все.


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

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

Задачу можно выполнить двумя способами.

Первый способ - с помощью меню. Для переходим в меню “View - New Guide Line”. Появится небольшое плавающее окно, в котором можно выбрать расположение (“Orientation”) создаваемой направляющей - горизонтальное или вертикальное.

И задать расстояние в пикселах (“Position”):

Photoshop New Guideline

Нажимаем ОК и видим результат:

New Guideline Result

Второй способ - не такой точный. В настройках Photoshop, относящихся к сетке, направляющим и слайсам (“Edit - Preferences - Guides, Grid & Slices”) нужно установить шаг сетки в пикселах (“Gridline Every”):

Guideline Preferencies

Затем выполнить привязку направляющей к сетке (“View - Snap To”):

Snap To Guideline

И теперь можно с большей (или меньшей) точностью выставлять направляющие guidelines:

Snap To Grid

На этом все.