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



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

#1 TimurR
TimurR
  • Пользователь PRO
  • 1 109 сообщений
  • Репутация: 273
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

Пользователи в игнор листе: MattCutts 



#2 ShowPrint
ShowPrint
  • Пользователь PRO
  • 3 380 сообщений
  • Репутация: 984

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

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


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


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

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

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


  • 0

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



#4 TimurR
TimurR
    Topic Starter
  • Пользователь PRO
  • 1 109 сообщений
  • Репутация: 273

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

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


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

  • 0

Пользователи в игнор листе: MattCutts 



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

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

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


  • 0

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



#6 TimurR
TimurR
    Topic Starter
  • Пользователь PRO
  • 1 109 сообщений
  • Репутация: 273

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

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


  • 0

Пользователи в игнор листе: MattCutts 



#7 ShowPrint
ShowPrint
  • Пользователь PRO
  • 3 380 сообщений
  • Репутация: 984

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

@TimurR,

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

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


#8 Sosnovskij
Sosnovskij
  • Администратор
  • 5 280 сообщений
  • Репутация: 802

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

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

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


  • 0

:excl: Требуется линкбилдер: браузер + Excel. Сдельная оплата + бонусы. Блог — https://sosnovskij.ru/. Добавить меня в TelegramTwitterFacebook.



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

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

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


  • 0

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



#10 TimurR
TimurR
    Topic Starter
  • Пользователь PRO
  • 1 109 сообщений
  • Репутация: 273

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

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


  • 0

Пользователи в игнор листе: MattCutts 



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


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

Пользователь месяца
BLIK BLIK 1-й за Ноябрь
Очков активности: 672 0 тем, 32 сообщения, 14 баллов репутации
ТОП самых активных за этот месяц
  • Фотография BLIK
    #1

    BLIK
    Очков активности: 63 Вне конкурса за определение пользователя месяца

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

    Vmir
    Очков активности: 51 1 тема, 14 сообщений, 2 балла репутации

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

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

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

    FIvYUr (moy-evroopt.ru)
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

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

    akmid81 (biznessystem.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

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

    Totti
    Очков активности: 18 0 тем, 6 сообщений, 2 балла репутации

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

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

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

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

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

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

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

    HITMAN84
    Очков активности: 12 1 тема, 5 сообщений, 1 балл репутации

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

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