Иногда при верстке макета возникает задача повернуть какой-либо объект на 90 или 180 градусов. В программе Photoshop это выполняется с помощью инструмента “Image Rotation”.

Допустим, у нас имеется такое изображение:

Необходимо повернуть его на 180 градусов против часовой стрелки.

Для этого переходим в меню “Image - Image Rotation” и выбираем нужный угол и направление поворота:

В результате получаем:

Изображение было развернуто на 180 градусов против часовой стрелки.

На этом все.

При верстке макета сайта одним из наиболее важных моментов является точное измерение размеров элементов на psd-шаблоне.

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

Об одном из инструментов измерения размеров на psd-шаблоне я уже рассказывал. Но программа Photoshop очень богата возможностями. Поэтому этот способ не является единственным. Сегодня будет показан еще один способ измерения размеров - с помощью инструмента “Rectangular Marquee Tool”.

Допустим, у нас имеется некий psd-макет, который необходимо порезать в Photoshop. И на этом макете нам необходимо узнать высоту шапки будущего сайта, то есть там, где располагается логотип. Открываем psd-шаблон, масштабируем его, чтобы шапка макета была крупной и нам было удобно с ней работать.

Затем переводим взгляд на панель инструментов Photoshop и на ней выбираем щелком мыши инструмент “Rectangular Marquee Tool”:

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

Проверяем, что все так, как и было задумано:

Большая часть дела уже была сделана. Теперь осталось узнать размеры выделенной области.

Для этого необходимо, чтобы была активирована панель “Инфо”. Если ее нет, необходимо включить ее через меню “Window - Info”. На этой панели в правом нижнем разделе показываются геометрические размеры выделенного элемента (W - ширина, H - высота):

Все размеры указаны в пикселах.

Стоит задача - подсчитать количество непустых строк в таблице Excel.

Собственно, таблица представляет из себя полуавтоматическую программу по составлению раскроя металлопрофиля. На “плечи” таблицы возложено вычисление остатков (отходов) при раскрое с учетом допусков-припусков, углов пила и ширины пила.

В таблице каждая строка символически представляет собой одну заготовку исходной длины. Ячейки, входящие в состав одной строки представляют собой детали требуемой длины. Так вот, при составлении раскроя половина процесса автоматизирована. Но потребовалось еще улучшить работу таблицы, а именно - автоматически подсчитывать количество непустых строк. Если в строке хотя бы одна ячейка непустая, то есть в ней присутствует значение, то такая строка считается непустой. Если же в строке все строки пустые (не имеют значения), то и строка считается пустой.

Первоначально пробовал решить задачу с помощью стандартной функции Excel -

1

СЧЕТЗ()

Первое решение

В этом способе применяется функция

1

СЧЕТЗ()

=1*(COUNTA(B2:N2)>0)

Ячейки

1

B2

1

N2

1

COUNTA()

1

СЧЕТЗ()

Результат работы этой формулы таков. Если хотя бы в одной ячейке строки имеется значение, то строка считается непустой и в соответствующей ячейке дополнительного столбца помещается единица (1). Если же ни в одной ячейке строки нет значения, то строка считается пустой и в ячейке дополнительного столбца помещается значение нуль (0).

Осталось самое простое - подсчитать значения дополнительного столбца, сумма которого и будет числом непустых строк в таблице.

Результат работы представлен ниже:

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

Второе решение

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

Этот код нужно вставить в Excel. Для этого открываем редактор макросов, нажав комбинацию клавиш Alt+F11. Откроется окно, в котором в меню выбираем команды “Insert - Module”. Сохраняем макрос под именем

1

CountRows

Теперь достаточно вставить в нужную ячейку таблицы формулу:

=CountRows(2:55)

В этой формуле диапазон

1

2:55

=CountRows(10:255)

Результат работы макроса приводить не буду, так как он очевиден. Единственное, что нужно сделать в завершении - это сохранить таблицу в формате Excel с поддержкой макросов.

Дополнение

В заключение поставил перед собой задачу отформатировать вывод ячейки с только что созданным макросом. Дело в том, что в окончательном документе-раскрое присутствует запись вида:

10 x 12000

где

1

10

1

12000

Для форматирования воспользуемся функцией

1

СЦЕПИТЬ (CONCATENATE)

1

СЦЕПИТЬ()

Я воспользовался заменителем функции

1

СЦЕПИТЬ()

1

&

=O21&" x "&A1

В этой формуле значение ячейки

1

O21

1

CountRows

1

A1

12 x 12000

P.S.

В приведенной статье была использована программа Apache OpenOffice 3, хотя в описании упоминался Excel. На самом деле разницы в этом нет никакой, так как в обеих программах используется примерно одинаковые стандартные функции электронной таблицы. Единственное, что необходимо учитывать - это применять английские названия функций в OpenOffice:

• COUNTA() - СЧЕТЗ()
• CONCATENATE() - СЦЕПИТЬ()
• SUMM() - СУММ()

На этом все.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь нам осталось только сохранить отредактированное изображение. Переходим в меню “File - Save for 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‘а

На этом все.