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


Партнерская программа Kredov

[Урок 3] Разрезка макета и определение размеров

#1 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180
8

Отправлено 02 Апрель 2015 - 17:04

Выбранный мною макет очень простой, в нем минимум деталей, которые нужно вырезать, все остальное простые линии и сплошные цвета, а это без проблем делается при помощи CSS. Единственное, что нужно вырезать, это логотипы и некоторые фоны и вырезать желательно с прозрачным фоном. Заранее прикрепляю логотипы и другие изображения в теме:

 

logo-footer.png logo-header.png

 

Далее мы сохраним фон так, чтобы он был бесшовным и его можно было бы прокручивать средствами CSS бесконечно. Для этого нужно выбрать в окошке со слоями, слой с background и растрировать стили. Далее с левой верхней части слоя, нужно инструментом выделения (горячая кнопка М) m.png  выделить участок 180 на 345 пикселей. Это значение я примерил на глаз. Выделенный участок нужно сохранить, это

будет наш бесшовный фон:

 

 bg.png

 

Остался фон контент блока и фон разделителей виджетов:

 

widget-line.png  

 

между стрелками картинка ->>  content-bg.png <<-между стрелками картинка 

 

С фоном контент блока (этот фон в принципе и фон виджетов), немного можно попариться, так как он бесшовным вряд ли получится, но примера ради вырезал как есть 25 на 25 пикселей. Вы можете поиграться с фоном. 

 

Определим размеры макета. Я определяю размеры при помощи того же инструмента m.png и направляющих, так как при выделении участка слоя мы видим сколько пикселей в ширину и высоту вы выделили.

 

Самая верхняя серая зона имеет высоту в 39px и нижний 1px бордюр. Высота оранжевой зоны у нас ровно 100px. Следом идущая зона имеет также 100px высоту и 1px бордюр снизу.

 

Основная ширина нашего макета 1040px, зона контента 621px без учета 2px бордюра, который добавляет по два пикселя с каждой стороны. Итого мы получим общую ширину в 625px. Отступ слева у нас составляет 49px.

 

Ширина сайдбара составляет 350px. Отступ между зоной контента и сайдбаром у нас 18px. Ну и наш футер имеет высоту в 240px. С остальными отступами и размерами мы разберемся по ходу верстки.


 

 

Сообщение отредактировал TimurR: 02 Апрель 2015 - 17:10

  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#2 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 703 сообщений
  • Репутация: 405

Отправлено 02 Апрель 2015 - 19:28

@TimurR, в конце тем может стоить добавлять "краткое содержание предыдущих серий"? (ссылки на посты предыдущих уроков)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#3 Info-Mans

Info-Mans
  • Пользователь
  • 1 176 сообщений
  • Репутация: 112

Отправлено 02 Апрель 2015 - 19:34

Отлично показали и рассказали. Жду продолжения


  • 0

»»» Начни изменять свою жизнь с внешнего вида «««
        Буду рад вашим комментариям на блоге!



#4 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 02 Апрель 2015 - 20:34

@ShowPrint, как все будет готово, будет создана специальная тема, которая будет содержать ссылки на уроки, если администрация сочтет нужным ее закрепить в этом разделе, с удобством навигации проблем не будет. 


Сообщение отредактировал TimurR: 02 Апрель 2015 - 20:53

  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#5 Info-Mans

Info-Mans
  • Пользователь
  • 1 176 сообщений
  • Репутация: 112

Отправлено 02 Апрель 2015 - 20:40

@TimurR, а сколько планируете уроков?)


  • 0

»»» Начни изменять свою жизнь с внешнего вида «««
        Буду рад вашим комментариям на блоге!



#6 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 02 Апрель 2015 - 20:48

@Info-Mans, проблема в том, что я не готовился, нет времени, поэтому точно не знаю, все делается на ходу. Я думаю, если размеры одного урока делать объемными, то в 20 уроков уложится все, что задумано. 


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#7 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 703 сообщений
  • Репутация: 405

Отправлено 02 Апрель 2015 - 23:00

@TimurR,

если администрация сочтет нужным
 Будем надеяться! Будет полезно всем делающим "первые шаги"... Мне в далеком 2004 пришлось все самому, без подсказок, осваивать... )))

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#8 Sosnovskij

Sosnovskij
  • Администратор
  • 3 886 сообщений
  • Репутация: 566

Отправлено 02 Апрель 2015 - 23:01

если администрация сочтет нужным ее закрепить в этом разделе

Маякните как будет готово ;) Полезный материал должен быть на виду :)


  • 0

Не стесняйтесь ставить оценки темам :) Правила форума. Мой блог http://sosnovskij.ru/.



#9 Info-Mans

Info-Mans
  • Пользователь
  • 1 176 сообщений
  • Репутация: 112

Отправлено 02 Апрель 2015 - 23:03

В золотые темы форума материал :)


  • 0

»»» Начни изменять свою жизнь с внешнего вида «««
        Буду рад вашим комментариям на блоге!



#10 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 02 Апрель 2015 - 23:08

@Sosnovskij, договорились  B)  


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



robot

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


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