Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Макетирование страниц 
:(
    Опции темы
p0zt3r
Дата 28.4.2009, 22:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 128
Регистрация: 4.2.2007
Где: Самара

Репутация: 1
Всего: 6



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

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

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

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

Спасибо!
--------------------
24*7*365*геморой*зарплата=0
PM MAIL ICQ   Вверх
p0zt3r
Дата 2.5.2009, 16:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 128
Регистрация: 4.2.2007
Где: Самара

Репутация: 1
Всего: 6



Нашёл для себя простой вариант для макетирования с помощью 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

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

Всё наработанное можно скачать отсюда, здесь можно найти эти картинки в более высоком разрешении и стиль для вебдванольного текста.

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

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


--------------------
24*7*365*геморой*зарплата=0
PM MAIL ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0375 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.