Инструкция
1
Выбирая методики, как нарезать макет, помните, что каждый верстальщик при работе с PSD-макетами использует собственные способы его нарезки. Поэтому на первом этапе выбирайте лишь самые простые техники, к которым относится и удобная для новичков нарезка созданного макета с графикой «на кусочки». Во-первых, сначала представьте мысленно, на какие части вы будете делить ваш макет, продумайте каждую его отдельную часть, и лишь затем приступайте к технической части самого процесса. Помните, что PSD-макет делится на «куски» в зависимости от его сложности, разделяя его на отдельные элементы. При этом каждый графический элемент должен быть независимым от всех остальных деталей.
2
Решая, как разрезать макет с шапкой, состоящей из кнопок, отдельного фонового слоя и текстовых слоев, помните, что в данном случае всю шапку в качестве картинки разрезать нельзя. В такой ситуации лучше разрежьте на картинки по отдельности все текстовые слои, каждую кнопку, а также фоновый слой шапки. Во-вторых, нарезка макета предполагает от верстальщика совершение действий в следующей последовательности. Если текст служит лишь частью декоративного оформления, используйте перед версткой HTML/CSS.
3
Сначала откройте сам макет в программе Photoshop так, чтобы справа появилась панель слоев, рассматривающаяся как костяк, необходимый для начала осуществления верстки. В случае, когда все изображения кликабельны, открывайте версию вашего макета в полном разрешении. Далее сверстайте все графические элементы таким образом, чтобы выглядел так же, как и в формате HTML, поэтому сохраняйте каждый ярко выраженный элемент с графическим изображением в нужном формате: GIF, JPG или PNG. Далее оставляйте только тот элемент, который собираетесь вырезать, а все остальные слои просто отключайте, и переносите нужный слой в заранее созданный в программе Photoshop новый документ.
4
Для выделения необходимого графического элемента используйте такой инструмент, как Rectangular Marquee Tool, позволяющий обозначить выделяемую область пунктирной линией. После этого обрежьте оставшуюся часть макета вплоть до выделенного пунктиром элемента, используя меню Image > Crop. Чтобы избавиться от ненужных слоев заднего плана, применяйте градиентную заливку, отключая видимость фоновых слоев. Далее выполните обрезку углов выделенной части, а затем сохраните все остальные слои в прозрачном виде.