С недавнего времени открыл для себя дистрибутив PCLinuxOS. До этого момента сталкивался с ним только по работе. Дело в том, что я пишу статьи и переводы по тематике Linux, и часто приходится переводить статьи из журнала PCLinuxOS Magazine, который освещает вопросы, связанные с работой этого дистрибутива.

Для перевода статьи по установке локального сервера LAMP под PCLinuxOS мне потребовались русскоязычные скриншоты. Естественно, для этого необходимо иметь локализованную операционную систему. То есть, нужно установить поддержку русского языка в системе.

Первоначально поступил стандартно - скачал свежий дистрибутив PCLinuxOS KDE и установил его под виртуальной машиной VirtualBox. Однако, установленная таким образом операционка так сильно тормозила, что мне пришлось устанавливать дистрибутив “по настоящему”. Благо, на тот момент на моем жестком диске имелся свободный раздел.

Установка прошла успешно. Но интерфейс операционной системы был на английском языке. Надо сказать, что по умолчанию в PCLinuxOS встроен только английский язык, а поддержка дополнительных языков устанавливается отдельно. Причем, дополнительные языки инсталлируются не совсем так, как например, в Ubuntu/Debian или других дистрибутивах. Не с помощью менеджера пакетов, а с помощью специального скрипта addlocale.

Итак, ниже привожу пошаговое руководство по установке русского языка в PCLinuxOS.

Обновление системы

После установки дистрибутива необходимо сразу же произвести его обновление. Даже несмотря на то, что он был только что скачан и по идее должен быть самым свежим. Дело в том, что PCLinuxOS относится к классу rolling-release, то есть, его обновление производится бесшовно. К такому классу также относятся известные Gentoo Linux, ArchLinux.

Запускаю менеджер пакетов Synaptic. И последовательно нажимаю кнопку “Reload” для обновления списка репозиториев, затем “Mark All Upgrades” - для выделения всех пакетов, доступных для обновления, и затем кнопку “Apply” - чтобы применить два предыдущих действия. Synaptic скачает отмеченные пакеты и произведет их установку в систему:

Обновление дистрибутива PCLinuxOS

Не закрываю менеджер пакетов, так как в нем необходимо выполнить еще несколько действий.

Изменение репозиториев PCLinuxOS

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

По умолчанию после инсталляции дистрибутива в Synaptic подключены два репозитория: http://ftp.vim.org/ibiblio/disributions/pclinuuxos/main и http://ftp.vim.org/ibiblio/disributions/pclinuuxos/policy. Перехожу в менеджере пакетов в меню “Settings - Repositories”. Откроется окно, в котором производится настройка репозиториев.

Здесь можно добавить, удалить, переместить или отключить репозиторий. Для просмотра всего списка служит полоса прокрутки. Отключаю репозиторий http://ftp.vim.org/ibiblio/disributions/pclinuuxos/main (он находится самым первым в списке) и вместо него активирую репозиторий http://ftp.heanet.ie/pub/pclinuxos/apt/.

Затем прокручиваю полосу прокрутки вниз и отключаю репозиторий http://ftp.vim.org/ibiblio/disributions/pclinuuxos/policy. Нажимаю кнопку ОК, чтобы сохранить изменения и выйти из этого окна. В основном окне Synaptic снова нажимаю кнопку “Reload”, чтобы обновить репозитории. Впрочем, система сама предложит вам выполнить это действие:

Обновление репозиториев PCLinuxOS

Теперь менеджер пакетов можно закрыть.

Запуск скрипта addlocale

Как уже говорилось ранее, скрипт addlocale в системе PCLinuxOS служит для установки дополнительных языков, в том числе и русского. Запускаю его, используя стандартную возможность системы Linux - нажимаю комбинацию клавиш Alt+F2.

В верхней части Рабочего стола появится строка для ввода команд:

Запуск скрипта addlocale

Вбиваю имя скрипта addlocale и нажимаю Enter.

Установка русского языкового пакета с помощью addlocale

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

Если же при повторном запуске данное сообщение появиться вновь, то необходимо выполнить последовательность действий: под учетной записью root удалить файл /tmp/xsuaddlocale; под учетной записью обычного пользователя запустить “Менеджер Локализации” (Localization Manager).

Это другое название скрипта addlocale:

Проверка версии скрипта addlocale

Оглашаюсь со скриптом и нажимаю кнопку OK. Затем снова запускаю скрипт, как это было описано в предыдущем шаге. Появится информационное окно, в котором описывается, для чего предназначен скрипт addlocale и описывается его возможности, принцип работы:

Информация о скрипте addlocale

Запуститься окно со списком доступных языковых пакетов. По умолчанию выбран пакет английского языка. Мне необходим русский язык, поэтому прокручиваю список вниз и отмечаю Russian:

Выбор языкового пакета PCLinuxOS

Все несложные действия выполнены, дальше скрипт выполнит все сам. Нажимаю кнопку ОК. Addlocale проверит все зависимости и возможные обновления:

Проверка зависимостей скриптом addlocale

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

Подтверждение выбранного действия

Начнется процесс скачивания и установки пакетов локализации:

Установка пакетов локализации

После успешной инсталляции языкового пакета появится сообщение о том, что можно перезагрузить операционную систему, чтобы изменения автоматически вступили в силу. Перезагружаюсь и “получаю” следующее сообщение:

Локализация системы PCLinuxOS

Последует целая серия вопросов, связанных с установкой русского языка в PCLinuxOS и изменения различных настроек, в том числе единиц исчисления, пути директорий в домашней папке пользователя. Трудностей с ответом на эти вопросы возникнуть не должно, поэтому скриншотов не привожу.

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

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

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

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

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

Что же получается? Выходит, нужно вырезать изображение, расположенное внутри рамки. Ведь если просто отключить в Photoshop эффект обводки, картинка получиться больше за счет того, что появятся скрытые под рамкой лишние пиксели. Такое изображение нельзя вставлять в код, так как оно не соответствует psd-макету. Средствами CSS невозможно создать границу border, чтобы она накладывалась на контент.

По спецификации CSS граница может располагаться только рядом с контентом, но не поверх. Кстати, есть еще одна статья, посвященная проблеме обводки - “Преобразовываем обводку из Photoshop в CSS”. Но в ней описывается случай, когда изображение можно оставить как есть, только добавив к нему внешнюю границу в коде CSS.

Как же можно поступить в данном случае? Для себя нашел такой выход. Отключаю эффект обводки для картинки, затем обрезаю ее по краям на толщину обводки, и уже сохраняю изображение для последующей вставки в код. Мне такой способ кажется точным и аккуратным.

В Photoshop есть инструмент “Рамка” (Crop), предназначенный как раз для вырезания элементов из psd-макета или обрезки изображений. В подавляющем большинстве всяческих руководств описывается только один способ использования этого инструмента.

Который можно назвать “ручным”, так как область выделения обозначается вручную, с помощью мыши. Но обрезку изображения можно выполнить более точным образом, с помощью инструмента “Размер холста”. В этом случае конкретно устанавливается размер рамки и ее расположение на картинке. Все, что находится за пределами рамки, будет обрезано.

Ну, хватит говорить, а лучше посмотрим на живой пример. Ниже показан масштабированный фрагмент psd-макета - картинка симпатичного льва, с рамкой в виде обводки:

Изображение с обводкой в Photoshop

Чтобы не гадать, так ли это, посмотрим на палитру слоев. Видно, что слой со львом имеет дополнительный стиль “Эффекты - Выполнить обводку”. Давайте узнаем, с какими параметрами художник создал данную обводку.

Двойным щелчком мыши кликаем на самом слое в палитре, после чего появится окно настроек стилей. Там их много, но включен только один, напротив которого стоит галочка:

Стиль слоя Обводка в Photoshop

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

Отключаю в палитре слоев эффект обводки и выделяю “чистое” изображение льва прямоугольным выделением:

Отключенный эффект обводки в Photoshop

Копирую выделение в новый документ, чтобы случайно не повредить оригинал psd-макета. Нажимаю сочетание клавиш Ctrl+A, выделив тем самым всю картинку. Мне это нужно для получения размеров нашего льва.

Видим, что ширина и высота изображения равны 118 на 95 пикселей. Значит, обрезку по краям необходимо выполнить на величину в 6 пикселей. Толщина обводки ведь равна 3 пикселям, по горизонтали и вертикали она расположена с обеих сторон картинки. Поэтому - 118px - 3px*2 = 112px, 95px - 3px*2 = 89px. Получили размеры ширины и высоты рамки, которую будем использовать в инструменте “Размер холста”:

Размеры скопированного изображения в Photoshop

Перехожу в меню “Изображение - Размер холста”. Откроется небольшое окно, в котором я введу полученные значения ширины и высоты для рамки. Также проверю, чтобы рамка располагалась по центру изображения:

Размеры холста в Photoshop

Жму ОК, чтобы применить изменения. Photoshop выдаст предупреждающее сообщение о том, что новый размер холста меньше оригинала, поэтому часть изображения будет усечена (обрезана). Ну, так мы этого и добиваемся, не правда ли? Соглашаюсь и получаю картинку нашего льва, которая уменьшена на заданную величину.

Чтобы проверить это, снова нажимаю сочетание клавиш Ctrl+A и смотрю на палитру “Инфо”. Точно - картинка имеет те самые размеры, которые необходимы:

Обрезанное изображение в Photoshop

Все, задача выполнена. Теперь картинку льва можно вставлять в код и прописать для него CSS-правила, наподобие таких:

img {border: 3px solid #fde40b};

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

Это же нужно построить аж 8 направляющих, и при этом не промахнуться, точно попасть на границы обводки. Иногда бывает, что обводка нарисована каким-то странным образом, как в данном случае:

Странные разводы обводки в Photoshop

Если замерить толщину обводки там, где есть эти непонятные мне разводы, то получиться толщина не 3 пикселя, а 4 пикселя. Несоответствие получается, однако. Ну, а дальше все как обычно - “Crop + Выделить участок изображения + Enter”.

На этом все.


Иногда может возникнуть ситуация, когда необходимо изменить точку отсчета линеек, отображенных в программе Photoshop. Например, имеется шаблон, открытый в Photoshop и отображены линейки “View - Rulers”:

Photoshop Original Point Guidelines

На шаблоне выставлены две направляющие: вертикальная - 50 пикселов, горизонтальная - 150 пикселов. На обоих линейках это четко видно. Теперь необходимо переместить нулевую точку отсчета так, чтобы она начиналась в точке пересечения направляющих.

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

Когда границы выделения и линии направляющих совпадут, отпускаем мышь:

Photoshop New Point Guidelines

Чтобы вернуть точку отсчета в первоначальное состояние, достаточно двойного щелчка мыши (как открываются любые папки в Windows) в сером квадратике на пересечении линеек. То есть, откуда была притянута новая точка отсчета:

Photoshop Original Point Renew Guidelines

На этом все.


Программа Photoshop обладает огромными возможностями. За годы ее развития разработчики вложили в нее много всего.

Однако, эта программа расчитана в первую очередь на дизайнеров. И дизайнеров-полиграфистов в первую очередь. Тот факт, что почти все современные дизайны сайтов создаются в Photoshop, я могу объяснить только силой привычки, с одной стороны, и раскрученностью программы, с другой. Под нее написано и создано просто бесчисленное количество книг, матриалов, статей и обучающих видеоматериалов. Настоящим же программным продуктом для создания дизайна сайтов является Adobe Fireworks. Но вот с обучающими материалами по ней, особенно на русском языке, дело обстоит плохо.

Ну, это я немного отвлекся от темы. Тема же данного небольшого обзора состоит в том, что нужно верстальщику в Photoshop. Точнее, какие инструменты ему необходимы в этой программе для своей повседневной работы. И тут я могу “успокоить”. Из безбрежного моря возможностей при верстке сайта кодеру потребуется всего несколько.

Как в присказке - все танцы начинаются от печки, так и здесь - все начинается с организации рабочего места. Под рабочим местом в Photoshop подразумевается набор панелей, выстроенных в определенном порядке и с соответсвующими настройками.

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

Панели Navigator и Info

Панели “Навигатор” и “Инфо” являются первыми двумя в нашем наборе. Чтобы включить (отобразить) их в рабочем пространстве Photoshop, необходимо перейти в меню “Window” и активировать из выпадающего списка записи “Navigator” и “Info”:

Panels Navigator Info

Для чего нужны эти две панели. Панель “Navigator” служит для более удобного просмотра и перемещения по макету. Панель “Info” гораздо более информативна и незаменима. На ней отображаются геометрические размеры элементов макета при их выделении; текущий цвет, выбранный под инструментом “Пипетка” (причем, сразу в двух цветовых системах - RGB и CMYK); текущее положение курсора мыши на макете. В повседневной работе наиболее часто используемой является возможность определения геометрических размеров.

Панели History и Layers

Панели “История” и “Слои” являются наиболее востребованными при резке макета. Включение (активация) производится в том же самом меню “Window”, только необходимо выбрать строки “History” и “Layers”.

Панель “History” незаменима при быстрой навигации по выполненным шагам (действиям). Само название этой панели говорит за себя. Представим, что было выполнено 30-40 операций на макетом. И после этого необходимо вернуть все назад, к первоначальному состоянию. Если производить пошаговый откат всех этих действий, то сколько это займет времени.

С помощью панели “История” это можно выполнить одним щелчком мыши. Достаточно открыть ее и выбрать из списка то действие, к которому необходимо вернуться. В этом смысле панель “History” работает как машина времени. Можно быстро вернуться к любому действию в прошлом:

Panels History Layers

Панель “Слои” представляет из себя список всех слоев, из которых состоит psd-макет. При нарезке макета на отдельные составляющие с помощью панели “Layers” можно выбрать и затем объединить только те слои, которые отвечают за прорисовку отдельного элемента. Это может логотип, кнопка, рисунок, фоновый рисунок и многое другое. В панели “Слои” также можно группировать слои для более наглядного их отображения и удобной работы.

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

На этом все.


При нарезании графики в готовом макете сайта очень часто приходится выполнять одну и ту же операцию - объединение слоев (Merge Layers).

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

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

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

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

Menu Colors

Результат может быть таким:

Selected Layers

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

Теперь осталось только объединить слои. Для этого вновь активируем контекстное меню (правая кнопка мыши) и выбираем в открывшемся списке пункт “Merge Layers”:

Merge Layers

В результате все выделенные слои преобразуются в один. Это также будет заметно в “Палитре слоев” Photoshop - вместо нескольких слоев останется только один. Это означает, что операция объединения слоев прошла успешно.

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

На этом все.