24/08/15 Открыта запись на обучение вёрстки для майбба - ссылка на тему

Избранные уроки Photoshop


Вверх
Вниз

COLOR MATE

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » COLOR MATE » Статьи » Разрезаем макет для установки на коды


Разрезаем макет для установки на коды

Сообщений 1 страница 3 из 3

1

Не раз наблюдала запросы на тему "объясните, как разрезать готовый макет". Скажу сразу, я не профессионал, в "шинковке" разбиралась сама, а потому моя точка зрения на эту тему может быть сугубо субъективной, и сильно отличаться от мнения признанных мэтров. Однако, если претензий ко мне на этот счет до сих пор нет, то я думаю, можно считать, что я все делаю правильно. Поделюсь результатами своих наблюдений и с вами.
Итак, первое, что вам нужно сделать до приступания непосредственно к разрезке - это представить саму структуру кодов. Я сейчас не имею в виду "что за что отвечает", совсем нет, с этим, как правило, каждый разбирается самостоятельно. Просто запомните, готовый сверстанный дизайн - это не цельная картинка, а несколько различных кусочков графики, лежащие друг поверх друга в различном порядке. Представляйте эту структуру как слоеный пирог, слои Сумрака или комплект одежды на манекене - кому что вкуснее и приятней пахнет.
Разберем эти слои поэтапно, каждый в отдельности, все вместе - в порядке с нижнего до самого верхнего.
1 слой - фоновый цвет
Его вы устанавливаете там же, где и заливаете картинку фона с повторяющейся текстурой, и именно этот цвет будет мозолить вам глаза во время переадресации (если нет других установок - все изменчиво в нашем бренном мире...)
2 слой - фон
Вы можете его задать как и текстурой, так и обычным цветом.
3 слой - тело
Та самая светлая штука с кучей всевозможных рамочек, на которой будут отображаться буковки текста в различной комплектации. Этот кусочек графики будет растягиваться по вертикали, заполняя собой всю высоту вашего форума.
4 слой - шапка и футер (он же подвал)
Именно эти два кусочка графики, встав на предназначенное им место, придадут вашему форуму законченный вид.
5 слой - остальная всевозможная графика
Оформление профиля, наполнение таблички, стрелочки вверх-вниз и графический контент в постах - все эти штуки находятся на самом верху, а потому заметны, обращают на себя внимание и не перекрываются чем-то более массивным.

Итак, с этим разобрались. Все понятно? Замечательно. Переходим непосредственно к разрезке готового макета, в качестве примера я использую собственный дизайн.
http://se.uploads.ru/t/lkZd3.jpg
Как вы видите, здесь я циферками и красными квадратиками пометила области, по краям которых нам нужно будет разрезать макет. Естественно, эти квадратики, как и сама последовательность цифр весьма схематичны, здесь показан лишь принцип.
1 - фон
Задается текстурой или цветом и (если у вас картинка) растягивается по вертикали и горизонтали в зависимости от масштаба окна браузера (попробуйте на разных форумах погонять его в +/-, сразу поймете, кто из дизайнеров поленился :D ). Важный нюанс - т.к. фон повторяется чаще всего, на нем не должно быть стыков (это самый главный-непреложный закон, который только можно выдумать). Если вы используете бесшовный фон (например, скачивали с ленаголда), то измерьте его размеры в папке, создайте новый файл по этим данным и перенесите в него фон. Будет проще, если вы начнете резать с угла, например, как здесь - так вам не придется шаманить и перемещать вырезающий квадратик (назовем это так) туда-сюда в поисках оптимального положения, при котором не будет стыков.
2 - тело
Ну, с ним понятно. Растягивается по вертикали, заполняя собой всю высоту форума. Важный нюанс - вы обязательно должны помнить, что пробник, на котором вы тестите дизайн, и окончательный форум - абсолютно разные вещи. На пробнике у вас 1-2 темы, на форуме - овер9000 различного барахла, которое растягивает ваше тело соответственно своим размерам, а вместе с ним изменяются и стыки тело-шапка, тело-футер. Т.е. если вы, имея на руках тело с текстурой жженой/сильно рваной/сильно неровной бумаги/листочки-листочки-цветочки (к примеру) подогнали все до идеального состояния на пробнике и уже станцевали ритуальный танец супер-крутого дизайнера, не забудьте прикинуть, а не будут ли у вас появляться несанкционированные прорехи/выступы на стыках тело-шапка, тело-футер.
3 - футер, 4 - шапка
Тут особого геморроя не предвидится, пожалуй, единственное, что от вас требуется - это подставить обе картинки так, чтобы они казалась естественным завершением тела.
Несколько советов:
- Первое и самое главное, что должен сделать дизайнер, устанавливающий разрезанный макет на коды - это разрезать и установить графику так, чтобы не было стыков. Вообще. Поэтому, если вы только недавно начали постигать это мудреное дело и сейчас находитесь в процессе собирания своего собственного кода со стандарта майбб (или любой другой системы), сделайте так, чтобы убрать всевозможные границы на обводке шапки, футера и где бы то ни было. Надо сделать это потому, что тонкие черные линии на светлом фоне, пусть даже и в 1 пиксель, опытному (иначе говоря - дотошному) глазу заметны, и их наличие вызывает вполне естественное ощущение небрежности и незаконченности дизайна. Потом на досуге подумаете, поэкспериментируете, найдете способ использовать эти границы, но сейчас, когда вы только-только начали разбираться, что где находится в кодах - уберите их.
   Еще один нюанс по стыкам: переходы тело-тело (при растягивании), тело-футер, тело-шапка, фон-фон (при заполнении) должны быть исключительно незаметны. Подтирайте мягкой кистью на прозрачном фоне, штампуйте, делайте что угодно, но стыка быть не должно. Если у вас шапка и футер заканчиваются вполне четкой рамочкой, а не мягким переходом на тело, то тогда вам проще - подгонять-подтирать не надо.
- Второе, что должен сделать дизайнер - максимально минимизировать потери, иначе говоря - облегчить дизайн. Не вся Россия сидит с высокоскоростного интернета, а многие вообще пользуются телефонным 3g, поэтому давайте не будем свиньями, подумаем и о тех, кому трафика не досталось. В связи с этим всю графику, не требующую прозрачного фона, переводим в jpeg/jpg, поверьте, вес страницы упадет в разы, а соответственно, и загружаться она будет быстрее.
- Шапка и футер. Здесь я их вырезала именно так, потому что у меня есть обводка тела тенью, плюс уголки. Если у вас такого, или чего-то подобного в макете нет, то вы смело можете вырезать шапку-футер точно по внешним границам.
- Всю остальную графику (профиль, иконки сообщений, категории и т.д.) выносим в отдельный файл. На примере показывать не стала, чтоб не захламлять.
- Немаловажно - экспериментируйте. Поначалу все учатся на чьих-то объяснениях и различных мануалах, но поверьте, ни один урок не является истиной в последней инстанции - у каждой проблемы есть как минимум 2 пути решения. А поэтому откройте для себя возможности режима разработчика, встроенного сейчас, наверное, в любой браузер, и ищите ошибки, изучайте коды, ведь только так вы сможете разобраться, что к чему в этой странной штуке под названием "свой стиль"))
Удачи вам)

+1

2

hopsia, спасибо, как раз решила учиться делать дизы.

Отредактировано Will of the Blades (16-01-2015 22:08:23)

0

3

Will of the Blades
не за что, удачи)

0


Вы здесь » COLOR MATE » Статьи » Разрезаем макет для установки на коды