Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Макетирование страниц

Автор: p0zt3r 28.4.2009, 22:09

Не подскажите ли свои методы быстрого макетирования страниц?

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

Да и вёрстка уже не проблема, когда заказчику представлены нормальные макеты.

Я гуглил, нашёл такую вещь, как Balsamiq Mockups, но это полная х**та.

Спасибо!

Автор: p0zt3r 2.5.2009, 16:09

Нашёл для себя простой вариант для макетирования с помощью Photoshop'а.

Для начала сделаем небольшую рыбу:

Код


<html>
<textarea rows=20 cols=50>
</textarea><br /><br />
<input type="button" size=20 /><br /><br />
<input type="radio" size=20 /><br /><br />
<input type="radio" size=20 checked=1 /><br /><br />
<input type="checkbox" size=20 /><br /><br />
<input type="checkbox" size=20 checked=1 /><br /><br />
<input type="text" size=20 /><br /><br />
<input type="password" size=20 /><br /><br />

<select>
<OPTION> Вариант 1 Вариант 1
<OPTION> Вариант 2 Вариант 2
<OPTION> Вариант 3 Вариант 3
</select>
<br /><br />
<select size=2>
<OPTION> Вариант 1 Вариант 1
<OPTION> Вариант 2 Вариант 2
<OPTION> Вариант 3 Вариант 3
</select>
<br /><br />
</html>

Открываем в браузере, например в Опере:

user posted image

Естественно, если нам надо прописать какие-то CSS, то прописываем их для элементов оформления.

Теперь скриншотим и открываем в Photoshop'e.

В нём есть такие удобные вещи, как кисти (brushes) и стили наложения слоёв (Blending options). В кистях удобно хранить неизменяемые монохромные растровые изображения.
Режем скрин нашей рыбы на отдельные элементы и создаём необходимые кисти.

С помощью стилей наложения слоёв удобно добавлять графическим элементам 3D-эффекты. Нам удобно сделать стиль для плоских элементов с обводкой, стиль для выпуклых элементов с bevel'ом и стиль для плоских элементов со светом и тонким контуром (используем градиенты и т.п.).

user posted image

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

Всё наработанное можно скачать http://depositfiles.com/files/bowawlqzz, здесь можно найти эти картинки в более высоком разрешении и стиль для вебдванольного текста.

Всё вместе это позволяет выполнять быстрое макетирование вебстраниц.

Благодарю за внимание!