1.1. Создание макета сайта на Photoshop. Ширина сайта, разметка сайта

Автор Maksim Inshakov
1.1. Создание макета сайта на Photoshop.  Ширина сайта, разметка сайта

Приветствую всех любителей сайта.

Строителей мастеров вы смотрите курс по созданию сайтов с нуля. Это первый урок цифры видеоуроков по созданию макета сайта в Photoshop в этом видео мы поговорим с вами разметки и ширине сайта. Дело в том, что уже на стадии планирования макета сайта.

Нам необходимо подумать о его адаптивности сегодня какой студента является требование сделать сайт адаптивным сейчас коротко хотелось бы рассказать вам о том, что такое адаптивный дизайн сайта адаптивный название говорит само за себя — это сайт который адаптируется под расширение экрана устройство на котором просматривается в страничка.

Это очень важный элемент потому, что пользователь может смазывать веб-ресурс на различных устройствах например со стационарного компьютера и мобильного телефона и как вы понимаете. У этих устройств будут разные размеры экранов для того чтобы на всех устройствах ваш сайт выглядел красиво мы занимаемся верстка сайта. Как — это верстать. И, что такое адаптивный сайт и мы узнаем чуть позже в цикле видеоуроков по верстке макета HTML CSS сейчас же нам необходимо определиться с шириной макета сайта и в первую очередь. Нам необходимо понять. По такое расширение экрана будем создавать макет большой роли — это не играет ведь позже при верстке макета мы будем адаптировать адаптировать уже сам сайт и так давай сейчас запустим Photoshop я пользуюсь своей работе Photoshop 5 версии он довольно обращение без лишних наворотов. И если уже у вас Photoshop более свежей версии. Я думаю, что — это не повредит нашей работе. Если же у вас вообще не Photoshop — это вы можете скачать его с моего сайта. Поэтому вот адресу также надо будет в описании и установить его и первый запуск программы нужно совершить от имени администратора и так давайте сейчас создадим новый документ документ создается таким. И вот здесь вот я предлагаю задать ширину сайта на 1200 пикселей на 1200 пикселей в высоту остальные 200 сейчас нам в принципе значение высоты неважно мы её сможем потом изменить в ходе работы отправить так как нам надо будет. И сейчас немного ещё поговорим о разметке, что здесь нажми. О'кей Вот такой вот у нас документ получается значит вообще. Всем рекомендую выработать в себе привычку делать разметку до того сделать разметку нам необходимо отобразить линейку если она у вас не отображается можете нажать на клавишу panthenol.ru таким образом. Она скрывается и также контроллер пока далее. Нам необходимо здесь вот на линейке выбрать единицу измерения и единицы измерения которые нам вообще подойдёт. Да — это делается просто правой кнопкой мыши по линейке выпадает вот такой вот меню. А и здесь вот уже перечисленные единица измерения пикселей в дюймы в сантиметры. Я бы предложил вам сейчас выбрать проценты имена. Посмотрите так сказать — это единица измерения в. Фотошопе То есть у нас ширина в принципе получается 100% до 100% и высота — это тоже. У нас вот здесь не обратить внимание 100% мы с вами сейчас ещё поговорим о разметке значит разметку можно сделать очень легко и просто. Для этого нам необходимо просто левой кнопкой мыши щелкнуть по линейке и не отпуская протягиваем курсор вниз и у нас появляется вот такая. Симка линеечка до такой степени, что — это как раз и есть вот заметка. Давайте ещё сделаем справа также сделаем точнее здесь слева да здесь права и также мы можем уже сейчас с вами наметить некоторые область область. Пусть — это будет долго сменю. Сделай мне на 2% и теперь давайте просто выберем инструмент прямоугольник и создадим область для меню делается очень просто левой кнопкой мыши кликаем протягиваем и обратить внимание. Как действует. Как работает вообще вот — это вот разметка зачем она полезна тем, что мы не выйдем. Да за намеченную область то есть мы не сделаем этот блок на этот прямоугольник больше меньше. Сделай мне такого размера какой какой у нас установлен именно с помощью разметки этим самым в принципе — это разметка и удобно далее. Давай сейчас перейдем уже которому уроку на этом закончим 1 надеюсь, что я понимаю, что этот урок был не очень интересен, но надеюсь, что он был для вас полезен.

0 комментариев
0

Читайте также