X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> [Урок 3] Разрезка макета и определение размеров
TimurR
TimurR
Topic Starter сообщение 2.4.2015, 18:04; Ответить: TimurR
Сообщение #1


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

Прикрепленное изображение
Прикрепленное изображение



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

 

Прикрепленное изображение


 


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

Прикрепленное изображение
 


 


между стрелками картинка ->>  

Прикрепленное изображение
<<-между стрелками картинка 



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

 


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

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

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

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


Сообщение отредактировал TimurR - 2.4.2015, 18:10
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
сообщение 2.4.2015, 20:28; Ответить: ShowPrint
Сообщение #2


TimurR, в конце тем может стоить добавлять "краткое содержание предыдущих серий"? (ссылки на посты предыдущих уроков)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Info-Mans
Info-Mans
сообщение 2.4.2015, 20:34; Ответить: Info-Mans
Сообщение #3


Отлично показали и рассказали. Жду продолжения
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
TimurR
TimurR
Topic Starter сообщение 2.4.2015, 21:34; Ответить: TimurR
Сообщение #4


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


Сообщение отредактировал TimurR - 2.4.2015, 21:53
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Info-Mans
Info-Mans
сообщение 2.4.2015, 21:40; Ответить: Info-Mans
Сообщение #5


TimurR, а сколько планируете уроков?)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
TimurR
TimurR
Topic Starter сообщение 2.4.2015, 21:48; Ответить: TimurR
Сообщение #6


Info-Mans, проблема в том, что я не готовился, нет времени, поэтому точно не знаю, все делается на ходу. Я думаю, если размеры одного урока делать объемными, то в 20 уроков уложится все, что задумано. 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
сообщение 3.4.2015, 0:00; Ответить: ShowPrint
Сообщение #7


TimurR,
(TimurR @ 2.4.2015, 23:34) *
если администрация сочтет нужным
 Будем надеяться! Будет полезно всем делающим "первые шаги"... Мне в далеком 2004 пришлось все самому, без подсказок, осваивать... )))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sosnovskij
sosnovskij
сообщение 3.4.2015, 0:01; Ответить: sosnovskij
Сообщение #8


(TimurR @ 2.4.2015, 23:34) *
если администрация сочтет нужным ее закрепить в этом разделе

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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Info-Mans
Info-Mans
сообщение 3.4.2015, 0:03; Ответить: Info-Mans
Сообщение #9


В золотые темы форума материал :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
TimurR
TimurR
Topic Starter сообщение 3.4.2015, 0:08; Ответить: TimurR
Сообщение #10


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


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Верстка и внедрение на сайт макета главной страницы
Требуется: с Figma на Laravel
2 ARsHi 1650 27.3.2021, 0:57
автор: Ogaelath
Открытая тема (нет новых ответов) Бесплатно сверстаю сайт из PSD-макета
0 tekna 1367 28.11.2018, 15:17
автор: tekna
Открытая тема (нет новых ответов) Адаптивная верстка из вашего PSD макета
4 savik 3193 24.10.2018, 23:43
автор: savik
Открытая тема (нет новых ответов) Верстка из PSD макета
верстаю сайты
1 Bakhtiyar 2959 20.3.2018, 23:19
автор: themesell
Открытая тема (нет новых ответов) Продажа макета / landing page авто услуги
3 nbcpa 5725 3.2.2018, 23:59
автор: 2009bes


 



RSS Текстовая версия Сейчас: 29.3.2024, 12:19
Дизайн