Перейти к содержимому



Сетка при рисовании дизайна и при верстке

#1 surfer
surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71
0

Отправлено 04 Март 2011 - 13:43

в последнее время многие говорят про сетку при разработке сайта, расскажите что это такое и как это делается?

 

 

  • 0

#2 zaharenko
zaharenko
  • Пользователь
  • 42 сообщений
  • Репутация: 0

Отправлено 04 Март 2011 - 14:07

в последнее время многие говорят про сетку при разработке сайта, расскажите что это такое и как это делается?

В фотошопе сетка включается сочетанием клавиш:
Ctrl+"
B выглядит это вот так:
Изображение
Используется сетка для того, чтобы все элементы были чотко структурированы, чтобы меню, различные блоки, кнопки и пр. "не налази" и "не прятались" друг под другом.
  • 0

#3 surfer
surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 04 Март 2011 - 14:40

сетку только в фотошопе можно реализовать? а можно ли как-то в браузере например отобразить?
  • 0

#4 FordogeN
FordogeN
  • Неактивные
  • 1 414 сообщений
  • Репутация: 0

Отправлено 04 Март 2011 - 14:55

surfer, сетку можно прикинуть на глаз, можно нарисовать для удобства. Делается это чтоб всё было ровно - часть эстетики :)
А если речь о сетке которую я упоминал в статье - я подразумевал разметку.
  • 0

Как настроить выдержку и диафрагму зеркального фотоаппарата



#5 surfer
surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 04 Март 2011 - 15:06

да, а как ты ее делаешь?
  • 0

#6 bestolloch
bestolloch
  • Неактивные
  • 224 сообщений
  • Репутация: 1

Отправлено 04 Март 2011 - 15:42

в фотошепе ctrl+h или view->extras
А что бы появилась просто нажми на область линейки (сверху или слева) и не отжимая потяни (вниз и вправо соответсвенно), на всякий случай чтоб линейка отображалась ctrl+r
  • 0

#7 surfer
surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 04 Март 2011 - 16:26

я про браузер спрашиваю!
  • 0

#8 admin
admin
  • Пользователь PRO
  • 5 275 сообщений
  • Репутация: 56

Отправлено 04 Март 2011 - 16:51

surfer, в браузере такого нету и не нужно, ведь макет не в браузере рисуется :)
Если надо посмотреть на сколько ровно отображаются элементы относительно друг друга, то можно сделать скриншот, вставить в фотошоп и там включить сетку
  • 0

#9 surfer
surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 04 Март 2011 - 17:18

в браузере было проще, ведь так быстрее результат верстки посмотреть
  • 0

#10 bestolloch
bestolloch
  • Неактивные
  • 224 сообщений
  • Репутация: 1

Отправлено 04 Март 2011 - 18:29

Смотри, если ты делаешь макет в фотошепе, почему при корректой верстке он может отображаться по другому?
В фотошепе сразу просчитываешь все отступы и размеры кратинок. Ну а сели не уверен то как писал админ - скрин))) но смыла особого не вижу
  • 0

#11 surfer
surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 04 Март 2011 - 18:40

я про это:

1. Рисую сетку по которой размещаю различные элементы (логотип, навигацию по сайту, пользовательское меню, поиск и т.д.);

взято отсюда: http://www.masterweb...-v-veb-dizaine/

что имелось ввиду и как это делается, дизайн делается позже:

2. Проверяю на 3-5 людях эффективная(удобная) конфигурация или нет. Если ни у кого не возникло сложностей - всё хорошо и пункт 3 нас ждет, если у кого-то возникли - возвращаемся к пункту 1;
3. На базе этой сетки рисую уже сам дизайн и верстаю его после чего повторяем пункт 2 только уже на других людях и уже на самом дизайне, а не на сетке.


  • 0

#12 bestolloch
bestolloch
  • Неактивные
  • 224 сообщений
  • Репутация: 1

Отправлено 04 Март 2011 - 18:44

Сорри, сразу не догнал)
Думаю в этой теме можно отписать свой вопрос по тойже статье "FordogeN, а ты как проверяешь пункт 2, верстаешь белую страницу с сылками (элементами меню, поиска, другими атребутами) или же просто в псд варинте?"
  • 0

#13 surfer
surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 04 Март 2011 - 18:48

отписал автору в личку, ждем ответа, просто подход мне понравился, хочу разобраться
  • 0

#14 FordogeN
FordogeN
  • Неактивные
  • 1 414 сообщений
  • Репутация: 0

Отправлено 04 Март 2011 - 18:55

Если на этапе рисования макета - я это делаю с помощью фотошопной сетки, а в браузере - я просто таблицами верстаю)
  • 0

Как настроить выдержку и диафрагму зеркального фотоаппарата



#15 surfer
surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 04 Март 2011 - 18:58

спасибо, за идею, я кое-то придумал как можно сделать это в браузере :)
  • 0

#16 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 05 Март 2011 - 02:29

surfer, на таблицах можно и бордюры выставить - вот вам и сетка. Но я уже 2 года, как на таблицах не верстаю.
  • 0

#17 surfer
surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 05 Март 2011 - 08:25

я тоже не верстаю, но думаю можно сделать картинку с сеткой и бэкгграундом в body поставить
  • 0

#18 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 05 Март 2011 - 23:23

surfer, да муть это все. Достаточно просто резать фоны и картинки в Photoshop и в HTML и CSS выставлять нужные размеры.
  • 0

#19 surfer
surfer
    Topic Starter
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 28 Март 2011 - 07:21

вль нашел похожее http://designformast...modular-layout/
  • 0

#20 yury
yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 28 Март 2011 - 14:13

в последнее время многие говорят про сетку при разработке сайта, расскажите что это такое и как это делается?

surfer,
сетка при разработке сайта — это примерно тоже самое, что и нарезка макета, только не после того как фотошоповский макет нарисован и отдан верстальщику, а на стадии рисования макета:
1.gif
Делается в зависимости от квалификации дизайнера и количества народу участвующего в разработке сайта:
* либо на листочке бумаги
* либо в любом граф.редакторе (например в пайнте или в фотошопе, кому что привычнее)
* либо вообще не делается, т.е. живет в голове у художника и стадия рисования сетки как бы пропускается
  • 0

robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
NataliaAntalia NataliaAntalia 1-й за Октябрь
Очков активности: 480 2 темы, 58 сообщений, 5 баллов репутации
Сайт: zdorovemedicina.ru
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 468 0 тем, 24 сообщения, 13 баллов репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 283.5 0 тем, 21 сообщение, 9 баллов репутации

  • Фотография Vmir
    #3

    Vmir
    Очков активности: 277.5 3 темы, 28 сообщений, 5 баллов репутации

  • Фотография Totti
    #4

    Totti
    Очков активности: 252 1 тема, 21 сообщение, 7 баллов репутации

  • Фотография Megoydagi
    #5

    Megoydagi (24ho.ru)
    Очков активности: 198 8 тем, 20 сообщений, 3 балла репутации

  • Фотография MattCutts
    #6

    MattCutts (dmitrylee.ru)
    Очков активности: 166.5 Вне конкурса за определение пользователя месяца

  • Фотография NataliaAntalia
    #7

    NataliaAntalia (zdorovemedicina.ru)
    Очков активности: 138 Вне конкурса за определение пользователя месяца

  • Фотография miketomlin
    #8

    miketomlin
    Очков активности: 78 0 тем, 13 сообщений, 4 балла репутации

  • Фотография TimurR
    #9

    TimurR
    Очков активности: 42 3 темы, 5 сообщений, 2 балла репутации

  • Фотография kolver
    #10

    kolver
    Очков активности: 24 3 темы, 7 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.10.2019
  • Яндекс выдача: 17.11.2019
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru