Как обещал макет для верстки

[Verder]

Заказчик - небольшой кредитный банк.
Разумеется, название и некоторая другая информация (в том числе некоторые картинки) заменены. Некоторые изображения вообще убраны, так как являются собственностью заказчика.

Макет конца 2008г.
В данный момент дорабатывается, будет сдаваться в июне-июле.

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

Требования к верстке (такие же, как предъявил заказчик).

1. Резиновый дизайн под мин. разрешение 1024х768 и до бесконечности.
2. Использование таблиц, блоков - на усмотрение верстальщика (продвижение будет покупаться) - главное 100% аутентичность. Верхнее меню с картинками о Кредитных линиях тоже тянется, ширина подложек зависит от ширины экрана.


Использованные шрифты: Tahoma / Miryad Pro (regular) - только в лого.

Скачать .PSD (в архиве) - http://yadi.sk/d/9ZHPdDRqCohbJ


Удачи.

Edited November 17, 2013 by Vlad

[Dimitry Wolotko]

Хороший макет, мне нравится. Спасибо за то, что выложил его в паблик.

Топик я перенесу, список PSD для вёрстки пополню.

Так же выложил к себе и картинку, и PSD'шку, на всякий случай.

PSD'шник - http://absolvo.ru/tmp/Verder/orange.psd

[Verder]

Если что копирайт подтвердишь?

Edited May 22, 2009 by Verder

[Dimitry Wolotko]

Конечно.

Только вот я тут заметил - в PSD все слои сведены воедино - так задумывалось?

[Verder]

Конечно.

Только вот я тут заметил - в PSD все слои сведены воедино - так задумывалось?

Да.

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

Иногда слайсами режет, но это не часто. Верстальщик, как правило, сам их протягивает как ему удобней. Режет, потом на черновик верстает, не обрабатывая.

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

Но это, я считаю, не очень удобно.

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

Edited May 22, 2009 by Verder

[Dimitry Wolotko]

Размер шрифтов на глазик что ли? Хотя бы текст выложи слоями.

[Verder]

Размер шрифтов на глазик что ли? Хотя бы текст выложи слоями.

А зачем? Должно присутствовать творческое начало

Я же написал - шрифт Tahoma. Для контента можно использовать размер шрифта 80%.

Макет в любом случае дает весьма приблизительное представление о шрифте. Когда верстальщик сделает - дизайнер ему подскажет, подойдет такой размер или нет.

[Dimitry Wolotko]

Тогда, пожалуйста, участвуй в обсуждении вёрстки, ага?

[Verder]

Тогда, пожалуйста, участвуй в обсуждении вёрстки, ага?

Разумеется.

[psywalker]

Verder]

Молодец дружище, исправляешься

Макет мне нравится, приколный, на вид в меру сложный и наверное ты прав, в нём есть свои подводные камни, но попробовать свои силы я только рад, займусь им после выходных наверно, а потом выложу сюда, покажу..Вобщем пока вопросы:

1) Левая колонка тоже должна тянуться?

2) В шапке справа, где баба по мобиле базарит,Под ней чё должно тянуться, пунктирная линия и вообще в этой области чё должно тянуться?

3) При наведении мыши в какой цвет ссылки меняются?

4) В меню Кредитная линия в каждой ячейке, справа Картинки ПНГ? и они распространяются прям до верха ячейки или должны закрывать только нижнюю границу, фон?

5) Размер шрифта основной 14 пикселов пойдёт или 12? Тахома вроде, да? и Не жирный?

Пока все вопросы, будут ещё ,спрошу тада

Edited May 22, 2009 by psywalker

[Verder]

Verder]

Молодец дружище, исправляешься

Макет мне нравится, приколный, на вид в меру сложный и наверное ты прав, в нём есть свои подводные камни, но попробовать свои силы я только рад, займусь им после выходных наверно, а потом выложу сюда, покажу..Вобщем пока вопросы:

1) Левая колонка тоже должна тянуться?

2) В шапке справа, где баба по мобиле базарит,Под ней чё должно тянуться, пунктирная линия и вообще в этой области чё должно тянуться?

3) При наведении мыши в какой цвет ссылки меняются?

4) В меню Кредитная линия в каждой ячейке, справа Картинки ПНГ? и они распространяются прям до верха ячейки или должны закрывать только нижнюю границу, фон?

Пока все вопросы, будут ещё ,спрошу тада

1. На твое усмотрение. Как правило, если есть левое меню, колонку делают фиксированной ширины, чтобы линки не перескакивали на строку вниз и чтобы не использовать <nobr> (только не всю площадь делай фиксированной! Просто под меню - там получится 200 - 230px .Слева и справа от меню должно сжиматься-разжиматься. Оставь примерно по 1.5em отступы слева и справа)

2. Смотри, область с выбором языков (включая верхние косые и серую нижнюю полоску) прижимается вправо. Тетка и полоса под ней - float:left. А вот середина с пунктиром (где икони home и mail) тянется. Обычно так делается.

3. Ну прояви смекалку, там всего 3 цвета с хвостиком

4. Ты имеешь в виду где тень-разделитель? Можно сделать png подложки, можно просто бэкграунд гифовый... Я бы бэкграюнд сделал чтоб потом проблем не было.

Edited May 22, 2009 by Verder

[Dimitry Wolotko]

Судя по всему, после нажатия на "твой банк всегда на связи" - должно появляться модальное окошко с логином-паролем?

[Verder]

Судя по всему, после нажатия на "твой банк всегда на связи" - должно появляться модальное окошко с логином-паролем?

Ну тебя прям прет от явы Это типа интернет-банкинга. Еще не решили как будет.

P.S.

Кстати, твой блог в понедельник будет наверное... Дача строительство, таджики-гасторбайтеры... Они мне п*дарасы столбики под пол положили так, что нацистам, строящи бараки для заключенных и не снилось. Щас переделывают уроды. Лучше бы нашу бригаду нанял - дороже но спокойней.

[psywalker]

Verder

Спасиб понял, а вот ещё уточнение:

1)

4. Ты имеешь в виду где тень-разделитель? Можно сделать png подложки, можно просто бэкграунд гифовый... Я бы бэкграюнд сделал чтоб потом проблем не было.

Это ты имеешь ввиду правые и левые разделители, Серые полоски..А мне интересно ещё узнать про нижнюю границу,справа каждово пункта меню,там такой двух полосный бордер, а справа на него как будто наложена ПНГ прозрачная, что это за тема вобщем?

2) Размер шрифта основной 14 пикселов пойдёт или 12? Тахома вроде, да? и Не жирный?

[Verder]

Verder

Спасиб понял, а вот ещё уточнение:

1)

Это ты имеешь ввиду правые и левые разделители, Серые полоски..А мне интересно ещё узнать про нижнюю границу,справа каждово пункта меню,там такой двух полосный бордер, а справа на него как будто наложена ПНГ прозрачная, что это за тема вобщем?

2) Размер шрифта основной 14 пикселов пойдёт или 12? Тахома вроде, да? и Не жирный?

1. Эту полоску можно бэкграундом пустить указав высоту. А потом наложить на нее картинки с этими полупрозрачными полосками. А вообще решай как тебе удобней

2. Размер шрифта должен быть указан в %. Просто если кто-то посмотрит на текс 12px на макинтоше, то он просто ничего не прочитает. Не жирный. Цвет... ну наверное #333 или #666

[Dimitry Wolotko]

Кстати, твой блог в понедельник будет наверное...

Ура, спасибо.

[psywalker]

Verder

А если я буду размер шрифта указывать в относительных единицах EM, пойдёт?

[Dimitry Wolotko]

Дизайнеру фиолетово

[Nekromancer]

да заказчику тоже..

[Verder]

В принципе да, фиолетово, главное не в пикселях, а то не дай бог на маке взглянет.

Вот, чтобы проще было, отметил где тянется а где нет. Но это последняя подсказка

Голубой: тянется (как будет тянуться сами решайте)

Зеленоватые оттенки: не тянется.

А вооще сами решайте, макет довольно простой.

Разумеется, на ширине 1024 не удастся добиться чтобы все было как на макете.

Edited May 22, 2009 by Verder

[psywalker]

Verder

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

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

[BassEast]

хорошо, завояем.

[psywalker]

BassEast

Отличное решение, поддерживаю

[Игорь Ермаков]

Вот здорово, создали такой классный раздел, с завтрашнего дня начну фигачить шаблончики

[psywalker]

Игорь Ермаков

Отлично, догоняй дружище