Создание дизайна сайта при помощи Photoshop

Создание макета сайта в Photoshop: руководство для начинающих

2,510 просмотров всего, 2 просмотров сегодня

Итак, вы решили поднять бизнес на новый уровень и запустить свой собственный сайт. У вас есть несколько вариантов:

  • Заказать ресурс в web-студии. Вы получите качественный продукт с продуманным юзабилити и чистым кодом. Он будет работать без багов на любом устройстве: от ноутбука вашей бабушки до айфона последней серии. Однако такое вложение требует денег, которые не всегда есть в наличии.
  • Нанять фрилансера. Найти хорошего дизайнера на фрилансе – все равно что искать спонсоров для стартапа. Работа настоящего специалиста стоит дорого (см. пункт выше), а тратить время на постоянные переделки, доработки и споры с дилетантом, наверняка, не очень хочется.
  • Воспользоваться онлайн-конструктором. Не рекомендуем, т.к. такие сайты практически не поддаются SEO-продвижению, а перспективу годами платить за целевой трафик из контекстной рекламы радужной не назовешь.
  • Заняться созданием сайта своими руками с нуля. Владея минимальными навыками верстки работы в Фотошопе, вы сможете легко нарисовать простой макет. А затем сверстать и выложить его в Интернет.

Одним из самых популярных графических редакторов на сегодня является Adobe Photoshop. Не самый простой для новичка, но обладающий широким функционалом и разнообразным набором инструментов. Профессионалы годами постигают тонкости программы, оттачивая мастерство дизайна. Но для создания простого макета начинающему автору достаточно базовых знаний, фантазии и хорошего пошагового урока.

Как в Фотошопе сделать дизайн сайта

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

Прежде, чем начать: подготовительный этап

Создайте файл будущего макета и придумайте для него понятное имя. Для этого нажмите «Файл – создать».
Размеры, которые предлагает Фотошоп по умолчанию, не подойдут. Создаем файл 1024×720 пикселей, а затем сохраняем его, включаем линейки (Ctrl+R) и активируем сетку (Ctrl+Э). Если все сделано правильно, вы увидите перед собой лист, расчерченный как школьная тетрадка в клеточку:

На готовом макете сайта клеток не будет. Линии видны только во время работы с макетом и используются для того, чтобы ровно располагать элементы будущего шаблона. Сетку можно настроить самостоятельно (тут: «Редактирование – Настройки – Направляющие, сетка и фрагменты») или скачать готовое решение в Интернете. Мы рекомендуем использовать сетку BOOTSTRAP? для удобства дальнейшей верстки и адаптации

Теперь нужно установить направляющие, между которыми будет находиться Тело, или основная часть будущего ресурса. Для этого нажмите «Просмотр-Новая направляющая» и выберите ориентацию «Вертикальная» и укажите положение от левого края будущей страницы (по линейке).

Направляющих нужно две, и расстояние между ними должно составлять не более чем 1003 пикселей (для дисплеев расширением 1024 х 720).

Начинаем рисовать

Создание красивого сайта – это больше чем про искусство. Это наука Usability, помноженная на опыт разработки интернет-проектов для разных тематик. Но порядок выполнения работ в Фотошопе практически одинаков.
Для начала нужно задать фон. И не обязательно рисовать картинку самостоятельно – можно скачать бесплатное изображение с любого из стоков. Не рекомендуем использовать текстуры с мелкими выделяющимися деталями: текст на таком фоне будет нечитабельным, а мелкие фрагменты отвлекут внимание пользователя от контента.
Чтобы добавить фон, откройте рисунок в Фотошопе и выделите изображение (Ctrl+A). Скопируйте картинку (Ctrl+С) и вставьте в будущий шаблон (Ctrl+V). Справа внизу вы увидите новый слой, который можно переименовать («Параметры слоя») и изменить («Параметры наложения»).

С помощью готовых стилей, инструментов и настроек вы полностью преобразите стандартную текстуру, придумаете оригинальное дизайнерское решение. Не рекомендуем использовать в качестве фона глубокий черный цвет и ядовито-насыщенные оттенки – это не лучшим образом скажется на читабельности текста.

Делаем шаблон для сайта

Теперь мы будем создавать дизайн сайта, разбивая слои на группы.

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

Разберем на примере хедера (header) и создания меню сайта. Создадим группу, назовем ее «Хедер» и в ней создадим подгруппу «Верхнее меню» с новым слоем «Фон». Для этого нажимаем на иконку в правом нижнем углу страницы:

Вот что у вас должно получиться:

Затем выставляем горизонтальные направляющие, выделяем прямоугольную область и выполняем заливку фона выбранным цветом, после чего снимаем выделение.

Теперь добавляем пункты меню – кликаем на инструмент «Текст», выбираем нужный шрифт и цвет и пишем. Далее добавляем изображения и текстовый контент. Не забываем добавить лого, номер телефона, кнопки соцсетей. Получится примерно следующее:

В этой статье мы не будем подробно описывать, как в Photoshop отрисовать кнопки или добавить визуальные эффекты (об этом можно прочитать в специальных уроках для начинающих дизайнеров). Не будем подробно разбирать каждый из элементов страницы (от Хедера до Футера). Постарайтесь разместить на странице информацию, которая заинтересует ваших потенциальных клиентов. И не забудьте про точки захвата и формы обратной связи.

В результате вашей работы вы получите дизайн сайта, готового к верстке с помощью html и css. А о том, как сверстать макет, в нашем блоге уже выходила отдельная статья
Как самому создать сайт или «не боги горшки обжигают».

Базовые уроки веб-дизайна в Фотошопе

Дата публикации: 2016-05-09

От автора: на прошлых занятиях мы рассмотрели теоретические основы веб-дизайна. Пора переходить к практическим занятиям, поэтому сегодня Вы получите базовые уроки веб-дизайна в Фотошопе и научитесь создавать стильные кнопки для сайта.

Рекомендую Вам, в первую очередь, изучить именно эту программу. Новички, любители и профессионалы — все работают в Фотошопе. Без него не представляют своей жизни тысячи дизайнеров, художников, полиграфистов и веб-мастеров.

Если работа веб-дизайнера придется Вам по душе, с помощью Фотошопа Вы сможете не только обрабатывать фотографии, но и делать сайты, обложки книг, баннеры и многое другое! Огромный арсенал средств ретуширования, обработки и монтажа изображений, точная цветовая калибровка, «ювелирная» работа с цветом делают Adobe Photoshop самым популярным, да что там говорить — самым лучшим графическим редактором.

Данная статья будет Вам полезна в том случае, если Вы только учитесь использовать Photoshop в своей работе. Сразу приготовьтесь к тому, что будете постоянно изучать эту программу, совершенствовать свои навыки и вырабатывать свой собственный стиль.

Как начать изучение Фотошопа?

Чтобы понять, как пользоваться Фотошопом, начните с теоретических основ. В первую очередь, скачайте и установите программу. Если у вас современный компьютер на базе процессоров FX или i5–i7, с минимум 8 гигабайтами оперативки, можете смело устанавливать Photoshop СS6, если характеристики ниже — придется довольствоваться PhotoshopCS5.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Установили? Молодцы, теперь пришло время познакомиться с всевозможными инструментами и элементами интерфейса. Если будете регулярно заниматься уроками Photoshop для web-дизайна, то постепенно изучите все эти инструменты в процессе практических занятий.

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

Дополнительно я бы посоветовал Вам полазить по разным профессиональным сайтам и изучить их оформление и структуру, чтобы найти сведения о модных тенденциях в сфере веб-дизайна, сформировать свое личное видение и развить художественный вкус.

Как настроить Photoshop для веб-дизайна?

Нажимаем Окно – Рабочая среда – Типография. Справа у Вас появятся панели работы со слоями и шрифтами.

Далее, советую перейти в настройки Ctrl+K и в разделе «Единицы измерения и линейки» выбрать Пиксели, т. к. мы работаем для веба, где используются именно пиксели, а не сантиметры.

Создаем новый файл: Файл — Новый, в каждом новом проекте проверяем, чтобы в настройках Ширины и Высоты стояли Пиксели. Разрешение — 72 точки на дюйм. Цветовая модель должна быть указана RGB цвет 8 бит.

Вообще, к параметрам создания нового документа относятся:

Имя будущего документа. Его обычно назначают при сохранении файла;

Ширина и Высота изображения. В нашем случае задается в пикселах, которые представляют собой единицу изображения в растровой графике;

Разрешение — количество точек на дюйм. Стандартным разрешением считается 72 пиксела на дюйм;

Режим. Самым распространенным является RGB цвет, глубина которого задается в битах. Обычно хватает 8 бит;

Содержимое фона, определяющее фон изображения.

Следующая настройка, о которой хотелось бы упомянуть, и о которой часто незаслуженно забывают, — это настройка обычной стрелки. Ставим галочку в Автовыборе, выбираем Слой и «Показывать управление трансформацией». Благодаря этому параметру вокруг выделенных областей будет появляться пунктирный прямоугольник с манипуляторами в серединах и углах сторон.

Ну и последняя настройка, которую нужно сделать, — это настройка на позитив . Без нее у вас не будет достаточной мотивации, чтобы эффективно и последовательно проходить уроки веб-дизайна в Фотошопе.

Создаем прямоугольник в Photoshop

Расскажу Вам, как сделать простенький объект в Фотошопе. С помощью инструмента «Прямоугольник» создаем одноименную фигуру, задаем ей нужный цвет заливки и границы. Здесь же можно создать прямоугольник с закругленными углами.

Небольшой лайфхак: если вы выделяете какой-либо объект (в данном случае, прямоугольник), то вы сможете изменить его размеры пропорционально, выделив его и зажав клавишу Shift. Таким образом, вы не деформируете изображение.
Это очень удобно, когда вы работаете с иконками. Зажав клавишу Alt, вы сможете скопировать объект при перетаскивании левой кнопкой мыши.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Делаем кнопку для сайта в стиле flat design

Направление «плоский дизайн» в последнее время чрезвычайно популярно в создании сайтов. При этом отрисовка его элементов не требует экстраординарных художественных навыков.

Чтобы вы не отставали от современных тенденций, в сегодняшнем уроке веб-дизайна в Фотошопе я научу Вас, как быстро и легко сделать кнопку для сайта, даже не обладая глубокими знаниями этой программы.

Создаем новый документ Файл — Новый и выбираем инструмент «Прямоугольник со скругленными углами».

Выбираем цвет, например, оранжевый #ff8b00, и радиус углов — 4 пикселя.

Рисуем кнопку нужного размера:

Чтобы сделать небольшой объем в стиле «плоского дизайна», выполните следующий прием. Создайте копию слоя с нашей кнопкой Ctrl + J, затем нижний слой с прямоугольником на 2–3 пикселя передвиньте вниз. Сделайте его цвет более темным, например, оттенка #bf6800.

Получится примерно такой результат:

На верхний прямоугольник можно добавить стиль «Градиент». С помощью двойного клика нажмите на слой с фигурой, выберите стиль «Наложение градиента» и поставьте угол наклона 90 градусов.

Цвета градиента — #ff8c00 и #ffcc3f.

Теперь наша кнопка выглядит так:

Для подписи можно применить шрифт Myriad Pro белого цвета.

Чтобы надпись была более удобочитаемой, создадим небольшую тень. Для этого выполним те же действия, что и с прямоугольниками. Скопируем слой с надписью, а нижний слой передвинем вниз на 1 пиксель и зададим цвет #be6d00.

Как видите, нарисовать стильную кнопку в Фотошопе — это не проблема. Теперь Вы можете создавать собственные кнопки. Главное, чтобы они вписывались в дизайн сайта, где Вы их будете использовать.

На этом наш урок веб-дизайна в Фотошопе подошел к концу. Надеемся, у Вас все получилось, и Вы извлекли максимум пользы из вышеизложенной информации.

Подписывайтесь на наш блог и получайте на почту все новые публикации по веб-дизайну. Рекомендуйте нас своим друзьям в социальных сетях. Новые знания и идеи еще никому не помешали . До новых встреч!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Создание дизайна сайта при помощи Photoshop

Ну для начала нужно настроить программу под себя.

Настраиваем Photoshop для web-дизайнера.

Редактирование -> настройки -> основные, или ctrl+k :

Во вкладке «интерфейс» выставляем всё как на картинке:

т.е. убираем все границы.

Во вкладке «производительность» историю действий выставляем побольше, например 60, рабочий диск лучше выбрать D .


Во вкладке «единицы измерения» везде ставим пиксели .

А почему собственно пиксели? Всё очень просто, в web-пространстве всё измеряется в пикселях, а не в сантиметрах или дюймах, Photoshop для web-дизайнера в этом плане всё предусмотрел.

Создаём рабочую среду в Photoshop.

Под рабочей средой понимается набор инструментов, которыми вы будете пользоваться постоянно.Для работы над web-дизайном нам понадобятся следующие окна: слои , история и символ . Открываются они следующим образом:

Таким же образом можете добавить и другие нужные вам окна.
Чтобы окна выглядели как одно, берём одно окно и тянем за верхнюю панель левой кнопкой мыши к верхней панели другого окна.


Сохраняем нашу рабочую среду:

даём ей имя и нажимаем кнопку «сохранить».

Изучаем инструменты Photoshop для web-дизайнера.

Создание нового документа:

В открывшемся окне выставляем параметры в зависимости от нашей цели, примерно так:

Или в поле «набор» можем выбрать пункт «заказная» и выставить свои размеры.

Сохранение документа.

Чтобы сохранить созданный документ, в нашем случае это макет сайта , поступаем следующим образом:

в открывшемся окне даём имя документу, например « макет сайта «, тип файла выбираем Photoshop (*.PSD;*.PDD) и нажимаем кнопку «сохранить».
Чтобы сохранить отдельную картинку для сайта делаем так:

Выставляем нужный нам формат, как правило, это либо JPEG, либо PNG (PNG используется для картинок с прозрачным фоном).
Чтобы сохранить отдельный блок из макета делаем следующие действия: берём инструмент «раскройка», выделяем блок (кнопку, картинку, логотип), далее

в открывшемся окне выставляем нужные параметры, нажимаем кнопку сохранить и появляется вот такое окно:

Если мы хотим сохранить только выделенный объект, то делаем как на рисунке и нажимаем кнопку сохранить.
Помните, что размер файла не должен превышать 100КБ , оптимальный размер 50-60КБ , иначе он будет тормозить работу сайта.

Линейки, направляющие.

Для создания макета сайта всегда используйте линейку и направляющие. В программе Photoshop для web-дизайнера это как раз предусмотрено.
Направляющие нужны для того, чтобы чётко отрисовывать все блоки сайта, кнопки, меню и т.д.
Линейка включается с помощью горячих клавиш Ctrl+R , или

Направляющие создаются путём перетаскивания левой кнопкой мыши от линейки либо слева, либо сверху (с первого раза может не получиться, потренируйтесь).Отключать и включать уже созданные направляющие можно с помощью горячих клавиш Ctrl+ ;.

Макет сайта всегда состоит из множества слоёв, которые помещены в отдельные папки. Выглядит это примерно вот так:

В папке «шапка» находятся все слои, которые относятся к шапке сайта, и т.д.
В папках могут находиться другие папки, которые будут содержать в себе слои.
Чтобы создать новую папку, жмём сюда:

Чтобы создать новый слой жмём сюда:

Чтобы переименовать слой или папку, щёлкаем два раза левой кнопкой мыши по названию слоя или папки и переименовываем.
Чтобы удалить слой или папку, щёлкаем правой кнопкой мыши по слою или папке и выбираем пункт меню «удалить слой/группу» .
Чтобы скопировать слой, делаем похожие действия, только выбираем пункт «создать дубликат слоя/группы» .
Слои и папки можно менять местами путём перетаскивания.

И вот, кстати, важная вещь при настройке рабочей среды в Photoshop для web-дизайна, это настройка стрелки. Эта настройка важна тем, что при наведении курсором на слой на самом рисунке, стрелка «хватается» этот слой, тем самым мы можем передвигать любые слои на макете не переключая их.

Итак, нажимаем на стрелку в левом верхнем меню, выбираем «слой» и ставим галочку «автовыбор».

Стили добавляются вот здесь:

С остальными инструментами и приёмами мы познакомимся на примерах в следующих уроках.

При создании WEB-дизайна сайта в Photoshop советую придерживаться правил стиля WEB 2.0

1-я часть курса «Создаем сайт с нуля (Фотошоп+верстка)»

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

Вопрос звучит примерно так: «Как нарисовать сайт в Фотошопе и как его потом сверстать в реально работающий сайт?»

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

Но примерно месяц назад один славный парень по имени Felix Boyeaux создал урок по созданию сайта (дизайн+верстка) с нуля.

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

Весь процесс разбит на две большие части:

1. Дизайн сайта в Фотошопе

2. Кодирование сайта с помощью HTML+CSS+jQuery

В данном цикле видеоуроков мы разберем первую часть. В следующем — вторую.

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

Итак, начнем!

Урок 1. Введение, подготовка нового документа и его разметка

Продолжительность: 12 мин 36 сек | Размер: 25 Мб

Урок 2. Создаем верхнюю часть сайта

Продолжительность: 20 мин 9 сек | Размер: 28,3 Мб

Урок 3. Создание шапки и логотипа

Продолжительность: 11 мин 22 сек | Размер: 16,7 Мб

Урок 4. Создание области контента

Продолжительность: 9 мин 54 сек | Размер: 16 Мб

Урок 5. Работаем над центральной частью сайта

Продолжительность: 9 мин 17 сек | Размер: 14,6 Мб

Урок 6. Создаем блок слайдшоу

Продолжительность: 10 мин 26 сек | Размер: 11,4 Мб

Урок 7. Создаем текстовый блок напротив слайдшоу

Продолжительность: 12 мин 31 сек | Размер:16,2 Мб

Урок 8. Рисуем навигационные вкладки

Продолжительность: 16 мин 57 сек | Размер: 27,2 Мб

Урок 9. Создаем блок для вывода записей с блога

Продолжительность: 22 мин 33 сек | Размер: 36 Мб

Урок 10. Создаем блок твиттера

Продолжительность: 16 мин 16 сек | Размер: 26,5 Мб

Урок 11. Создаем футер и копирайты, исправляем ошибки

Продолжительность: 13 мин 43 сек | Размер: 26,4 Мб

Дополнительные материалы

PSD-исходник

5 последних добавленных файлов в рубрике»Видеоуроки»

Как заставить человека просмотреть видео на сайте до конца?

В этом уроке вы познакомитесь с отличным плеером для показа видео на вашем сайте JW Player, а также научитесь взаимодействовать с ним, привязывая к разным моментам просмотра видео всякие события. Например, если вы делаете какую-то продающую презентацию и хотите, чтобы люди увидели кнопку заказа только ближе к концу презентации, то с помощью данного видео вы сможете это сделать.

Эффект дразнящего уголка для вашего сайта

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

Как добавить комментарии Вконтакте к своему сайту

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

Эффективная гостевая книга для joomla-сайта

Гостевые книги часто используются на сайтах в качестве эффективного способа обратной связи с людьми, которые заходят на ваш сайт. Посетители могут высказать свое мнение относительно сайта, дать какой-то совет или задать вопрос. И в этом уроке мы установим на сайт, работающий на движке джумла, компонент гостевой книги phoca guestbook.

Открываем счет в системе PayPal

Последние несколько лет все свои покупки на аукционе ebay и многих интернет-магазинах я оплачиваю с помощью системы PayPal. Это удобно, безопасно и быстро. О том, как открыть счет в этой системе, я расскажу в двух видеоуроках, которые записал специально для вас.

Создание дизайна сайта при помощи Photoshop

Готовые веб-сайты на базе Weblium: включены настройка, хостинг и доменное имя.

MotoCMS конструктор сайтов

Новый drag-and-drop конструктор сайтов от MotoCMS с хостингом, бесплатным доменном и 24/7 сапортом.

  • WordPress
    шаблоны 2152

Три причины использовать вордпресс: простота, надежность, скорость

Elementor маркетплейс 624

Новинка!! Шаблоны, плагины и темы для настоящих поклонников Elementor

Joomla
шаблоны 1173

Лучший выбор для пользователей с опытом создания сайтов!

Moto CMS 3
шаблоны 808

Система управления сайтами для новичков.

Drupal
шаблоны 357

В умелых руках Drupal может все!

MotoCMS HTML
шаблоны 1773

Мощная админка с функциональными шаблонами для пользователей без технических навыков.

  • Адаптивные
    шаблоны 10579

Сделайте сайт адаптивным. Пусть он одинаково хорошо выглядит на экранах любого размера!

Посадочные страницы 648

Шаблоны, которые помогут превратить посетителей в клиентов!

Все, что нужно для сайта: функциональность Bootstrap и адаптивный дизайн

HTML5
шаблоны 2512

Идеальные шаблоны по стандартам HTML5. Крутой дизайн и чистый код!

Unbounce
шаблоны 44

Приносящие клиентов Unbounce шаблоны. Лендинги для профессионалов.

Шаблоны
фотогалерей 217

Идеальное сочетание простоты и возможностей админки со стильным дизайном.

Шаблоны email рассылок 203

Адаптивные письма с современным дизайном значительно повысят эффективность ваших рассылок.

Muse
шаблоны 174

Создайте функциональный кросс-браузерный сайт на основе решения от Adobe.

Специальные страницы 21

Лучшие шаблоны специальных страниц от TemplateMonster! Теперь вам не придется нанимать профессинальных разработчиков для дизайна и создания отдельных страниц как Страница 404, Вскоре и другие.

Найдите лучшие eBay шаблоны, чтобы увеличить прибыль вашего интернет-магазина на базе eBay

Шаблоны для админок 57

Шанс для контрольных панелей выглядеть хорошо! Стильные темы на основе Bootstrap.

Шаблоны
приложений 12

Лучшие шаблоны приложений на TemplateMonster! Теперь вам не нужно нанимать профессиональных разработчиков, чтобы создать мобильное приложение для сайта

  • WooCommerce
    темы 620

Готовые шаблоны, что бы добавить магазин на ваш WordPress сайт

Shopify
шаблоны 618

Простая e-commerce платформа для тех, кто не хочет задумываться об администрировании сайта

PrestaShop
шаблоны 700

Дружественная платформа с быстрой установкой и простым управлением

Magento
шаблоны 494

Надежные и масштабируемые интернет-магазины для профессионалов

OpenCart
шаблоны 762

Шаблоны для магазинов, которым нужен задел для роста

MotoCMS
магазины 130

Адаптивные шаблоны с Drag&Drop редактором позволяют создавать интернет-магазины еще проще.

BigCommerce шаблоны 8

Премиум BigCommerce шаблоны для интернет-магазинов. Наслаждайтесь высокой функциональностью и эффективностью шаблонов

VirtueMart
шаблоны 220

Гибкий плагин для создания интенет-магазина на Joomla. Идеален для мелкого и среднего бизнеса.

ZenCart
шаблоны 224

Интернет магазины с огромными маркетинговыми возможностями

Шаблоны X-Cart 17

Купите премиум шаблон X-Cart, чтобы быстро и легко создать надежный проект электронной коммерции! Получите полностью адаптивный дизайн и высокую производительность шаблонов

  • WordPress
    плагины 40

Гарантированный способ расширить функциональность вашего WordPress сайта.

PrestaShop
модули 30

Улучшите функциональность вашего магазина с помощью удобных модулей для Prestashop.

Лучшие JavaScript и jQuery плагины от TemplateMonster. Сделайте ваш сайт более интерактивным с помощью дополнительных плагинов.

  • PowerPoint
    презентации 1263

Шаблоны для идеальной визуализации любой информации на презентации

Шаблоны
Keynote 328

Шаблоны Keynote — это профессионально разработанные шаблоны, на основе которых вы можете создать свою презентацию

Шаблоны логотипов 3485

Логотип является очень важной составляющей корпоративного дизайна. Шаблоны логотипов – продукты, созданные в Adobe Photoshop, Adobe Illustrator или Corel Draw форматах

PSD
шаблоны 3318

Многофункциональные шаблоны, кототые содержат исключительно графические файлы

Шаблоны
резюме 590

Лучшие шаблоны резюме для печати на TemplateMonster! Выберите подходящий дизайн и расскажите о своем опыте профессионально

Шаблоны сертификатов 81

Лучшие шаблоны сертификатов от TemplateMonster. Вы найдете множество разных дизайнов сертификатов для любой сферы

Отличные иллюстрации, которые помогут вам улучшить свой сайт, листовку или документ.

Элементы инфографики 22

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

Универсальные шрифты для Photoshop и Illustrator в формате TTF (TrueType).

Мокапы продуктов 82

Лучшие мокапы продуктов на TemplateMonster. Вы найдете множество макетов гаджетов, одежды, мебели, брендинга для дизайна магазинов, сайтов, рекламных материалов и соцсетей.

Лучшие наборы продуктов от различных авторов на TemplateMonster. Это категория, которую вы так ждали. Бандлы включают шаблоны, изображения, иконки, мокапы, шрифты, баннеры для рекламы и многое другое!

Элементы интерфейса 25

Купите набор эелементов интерфейса на TemplateMonster, чтобы оживить свой сайт.

Социальные сети 85

Лучшие наборы шаблонов для социальных сететй от разных поставщиков TemplateMonster. Найдите больше шаблонов для постов в Instagram, обложек для Facebook, Pinterest и YouTube каналов, а также много других

Шаблоны
видео 240

Голливудское качество видео на любой вкус!

Анимированные баннеры 61

Лучшие Анимированные баннеры от TemplateMonster. продвигайте свой сайт или зарабатывайте на рекламе. В нашей коллекции вы точно найдете подходящий баннер

Фирменный
стиль 6110

Шаблоны фирменного стиля включают в себя логотип, фирменный бланк, дизайны визиток

Наборы иконок 170

Наборы иконок включают 10 тематических иконок. Все они могут редактироваться в Adobe Photoshop, Adobe Illustrator или Corel Draw.

Коллекция лучших паттернов только на TemplateMonster

Премиум Sketch шаблоны только на TemplateMonster

Создание дизайна сайта при помощи Photoshop

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

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

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

Да чего уж там, меня и самого когда-то выручил именно Photoshop при устройстве в рекламное агентство, даже несмотря на отсутствие большого дизайнерского опыта!

Скажем, вы изо дня в день рисуете стикеры, простые вывески или трафаретные картинки на футболки.
Вы чувствуете, что способны на более интересную работу, но не знаете, как вырваться из рутины?

Овладейте Photoshop, это откроет вам множество новых дизайнерских возможностей и направлений
и выгодно выделит вас среди коллег!

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

С помощью Photoshop вы сможете: ретушировать свои фотографии, создавать коллажи, фантастические композиции, аватарки, анимированные иконки для своего сайта или блога и многое другое!

В Интернете можно найти множество видеокурсов и отдельных уроков, посвященных этой программе. Пожалуй, это одна из самых популярных тем для широкой аудитории.

С одной стороны, это здорово! Каждый желающий может посмотреть несколько видео и чему-нибудь научиться.

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

Задумав наконец создать курс по работе в Photoshop, мы хотели, чтобы он принципиально отличался от курсов наших конкурентов.

Поскольку главная специализация нашей Виртуальной школы — графический дизайн, мы решили оптимизировать курс строго под нужды начинающих графических дизайнеров-верстальщиков .

За 8 месяцев работы у нас вышел основательный видеотренинг, цель которого — передать начинающим графическим дизайнерам объем знаний, необходимый для успешного начала работы по профессии.

Имеет высшее архитектурное образование, также закончила художественную школу.

Преподает фотошоп и фоторетушь в школе графического дизайна г. Алматы, Казахстан.

Более 10 лет рисует векторную и растровую графику для продажи на микростоках и работает на фрилансе как художник-иллюстратор.

Переходя от модуля к модулю, вы изучите все инструменты и функции Adobe Photoshop и создадите четыре макета — три рекламные листовки и одно рекламное объявление .

Заключительная часть тренинга будет посвящена ретуши фотографий.

Создание Actions и пакетная обработка фотографий.

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

Программа курса была составлена исходя из необходимости подготовить комплексного специалиста для успешного начала работы в области дизайна и верстки полиграфической продукции .

Наш тренинг передаст вам объем знаний и навыков, необходимый для реализации профессиональных дизайн-макетов, в которых используются растровые изображения.

В процессе прохождения тренинга студенты создадут четыре макета — три рекламные листовки и одно рекламное объявление .

Пройдя наш тернинг Вы научитесь не только работать в программе Adobe Photoshop, но и грамотно использовать профессиональное комплексное решение за счет интеграции других программ пакета Adobe Creative Suite и Creative Cloud: Adobe Illustrator, Adobe Brigde и Adobe Acrobat.

  • На тренинге вы создадите прочную основу владения Adobe Photoshop, начиная с изучения важных меню, инструментов и панелей.
  • Мы научим вас эффективно работать в среде Adobe Photoshop с различными режимами, панелями и настройками, чтобы вы могли оптимизировать рабочий процесс, который улучшит ваши проекты и сэкономит время.
  • Вы узнаете, как использовать Adobe Photoshop
    для дизайна рекламных объявлений и листовок, для создания фотомонтажа, коллажа и ретуши фотографий.
  • Под руководством автора курса вы создадите несколько качественных работ для своего дизайнерского портфолио.

Курс был настолько понятным и хорошо сделанным, что можно было начать заниматься утром и не оторваться до вечера.

Для меня самое важное на курсах (любых) это что-бы ДЗ напрямую относилось к тому что показано на уроке. Так, можно точно повторять за учителем что помогает понять программу лучше и не боятся её. А как следствие — её полюбить и уже не боятся экспериментировать. Кроме того мне очень понравилось что способ обучения был действительно для новичков но при этом закладывал очень хороший фундамент для продолжения работы в программе.

Понятные, серьёзные объяснения достойные хорошего репетитора. Быстрая проверка ДЗ. Преподаватель понимала мои проблемы сразу и сразу давала дельные ответы и помощь. Красивый голос!

Курс был настолько понятным и хорошо сделанным, что можно было начать заниматься утром и не оторваться до вечера. Большое спасибо!

Этот курс однозначно для меня оказался тем самым!
На все вопросы я получила ответ, а проверка очень оперативная.

Очень понравился курс Фотошопа. Преподаватель Оксана Решетнева буквально, «разжевала» всё, что требуется для вхождения в программу с нуля, все основы, всю базу заложила в этот курс.

Занятия проводятся с поэтапным усложнением задач, где все предыдущие навыки закрепляются повторением. В итоге, к концу ты понимаешь, что уже много легче выполнять стало даже новые задания))) это безумно радует, окрыляет и придает сил и веры в себя))). Этот курс однозначно для меня оказался тем самым! На все вопросы я получила ответ, а проверка очень оперативная.

Создание дизайна сайта в photoshop

С завидным постоянством возможности Интернета возрастают. Сейчас ни одного современного человека невозможно удивить, что кто-то является пользователем всемирной паутины. С каждым днем на его просторах увеличивается количество разнообразных сайтов. Ранее свой личный сайт могла позволить себе иметь только солидная компания, имеющая немалый доход. Теперь это может позволить себе не только физические лица, но и простой обыватель.

Каждый из владельцев сайта, или из будущих владельцев по своему решал вопрос, связанный с разработкой для своего сайта дизайна. Те, кто мог себе позволить минимальные вложения заказывали сайт с нуля и под ключ, либо один только дизайн у фрилансеров – частные веб-мастера. Они разработают уникальный дизайн для сайта. Стоимость их услуги не так уж велика. В особенности это касается начинающих индивидуальных Исполнителей. Они готовы создать дизайн для сайта для Вас с минимальными финансовыми затратами. Им необходимо еще наработать опыт, заслужить авторитет и положительные отзывы, наполнить работами портфоли.

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

Однако существует и еще один способ по созданию сайта – бесплатно. Некоторые, которые хотят для себя изучить досконально направление деятельности по созданию сайтов, читают на просторах Интернета специализированную литературу, либо здесь же приобретают ее. Им требуется немало времени на ее изучение. Затем они начинают на практике пробовать самостоятельно разрабатывать сайты.

Существует немало и специальных онлайн-конструкторов, которые позволяют даже «чайнику» самостоятельно, за короткий промежуток времени создать свой личный сайт.

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

Но есть еще один фариант создания дизайна для своего сайта – это использование программы photoshop.

В этой статье ознакомим Вас с базовым представлением о photoshop, как на его платформе создавать базовые вещи, к примеру, нарисовать какую-либо форму или добавить нужный текст, повернуть объект и изменить размер.

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

Постараемся рассмотреть создание дизайна для сайта, который имеет «header», содержащий наименование организации и навигационную область. В «header» на первый план необходимо выдвинуть не только ключевые моменты бизнеса, но и различные вспомогательные детали.

Следующая область, которую нам потребуется сделать – это область с описание сервиса и других необходимых деталей. В самой нижней области разместим секции для оставления посетителями и клиентами своих отзывов, а также небольшой обзор сайта. Это позволит нам создать у потенциальных клиентов доверительное отношение к нашей компании.

Последняя область, которая будет размещаться в самом низу, разместим сноску, содержащую стандартную информацию об авторских правах.

И так, Adobe Photoshop. Он представляет собой специальную программу, которая позволяет ее пользователю создать огромное количество визуальных эффектов. При помощи Adobe Photoshop пользователь сможет воплотить в жизнь даже самую фантастическую идею дизайна сайта.

Не думайте, что для создания удивительного дизайна в Adobe Photoshop, потребуются быть мастером живописи. Однако минимальный набор знаний об основных композициях и цветовых гаммах все же знать необходимо. В фотошопе имеется специальный графический планшет в котором можно будет самостоятельно нарисовать дизайн для будущего сайта. Можно использовать для этих целей обычную мышку, но здесь необходимо принимать во внимание сложность элементов.

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

Что касается типичного шаблона сайта, и это не только в фотошопе, а в целом, то он включает в себя несколько частей. Это шапка сайта, контентного (информационного) блока, панели для меню веб-ресурса и, так называемого «подвала». Размещение всех этих элементов производится на болванке. Их ширину и высоту необходимо выбирать таким образом, чтобы она соответствовала предполагаемому разрешению монитора посетителей сайта.

Перед тем, как приступить к созданию дизайна будущего сайта, необходимо в фотошопе создать новый документ. Его ширина рассчитывается в пикселях и должна соответствовать разрешению экрана. К примеру, задаем ширину, равную 1024 пикселя. Высоту берем произвольную, она особой роли не играет. В любом случае в браузере страница сама растянется по вертикали. При создании дизайна сайта используйте стандартное разрешение. Оно составляет 72 пикселя на один дюйм. При выборе цветового режима устанавливаем значение «RGB» на восемь бит.

После чего в фотошепе при помощи специальной команды «Показать – Новые направляющие» (View — New guide) мы имеем возможность в соответствии с модульной сеткой разместить нужную нам страницу. Таким образом, мы сможем добиться точного совпадения размеров эскиза и окончательного документа. Помимо этого, в фотошопе мы сможем, по своему усмотрению использовать уже готовые сетки. Здесь присутствует достаточно количество сеток, которые подходят под различные разрешения экранов. В большинстве случаев такие сетки предоставляются абсолютно бесплатно.

На следующем этапе нам потребуется создать фон веб-страницы. Мы можете использовать однотонный фон. Чтобы его установить используем команду «Заливка» (Paint Bucket Tool), где имеется установленное значение «Фоновый цвет» (Foreground) и заполняем все пространство документа необходимым для нас цветом. Также Вы можете в качестве фона использовать любое изображение или понравившийся узор. Если Вы выбрали узор, то его можно установить с помощью специальной команды «Paint Bucket Tool». В этом случае должно быть установлено значение «Узор» (Pattern).

Выполнив все необходимые действия начинаем создавать элементы на сайте.

Для того, чтобы сделать надписи на иконках и кнопках, необходимо будет использовать специальный инструмент под названием «Горизонтальный текст» (Horizontal Type Tool). Если необходимо сделать вертикальные надписи, то используем «Вертикальный текст» (Vertical Type Tool). Также можно изменить и размер, гарнитуру шрифта, выравнивание текста.

Чтобы продолжить свою работу по созданию для своего сайта дизайна, нам потребуется созданный шаблон разделить на части. Это нам необходимо сделать, чтобы потом мы могли разместить шаблон дизайна в ячейки таблицы, используя при этом html верстку страниц.

Чтобы сохранить разделенные части, используем команду «Save for Web&Devices». Чтобы это сделать необходимо в диалоговом окне выбрать тип файла «HTML&images», а затем сохраняем его под именем «index.html» или «index.htm». Теперь дизайн шаблона нашего будущего сайта состоит из файла, под названием «index.html» и каталога с названием «images». В последнем будут находиться разделенные наши кусочки. При необходимости редактирования файла «index.html» мы можем использовать блокнот, или любой другой редактор html.

Рекомендуется сбор в фотошопе дизайна своего сайта собирать как конструктор. Это позволит различные элементы размещать на разных слоях. Если возникнет необходимость, то их с легкостью можно будет переместить или скрыть, объединить.

Разрабатывая дизайн сайта при помощи фотошопа, работа веб-мастера по использованию фильтров и плагинов, различных экшенов значительно упрощается и сокращает время на этот процесс. Экшен или пакетная обработка файлов, позволит в значительной степени упростить работу с несколькими документами. Благодаря пакетной обработке данных, Вы сможете одновременно применить к документу несколько действия сделав всего лишь одно нажатие клавиши.

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

И напоследок, несколько слов о том, как изменить дизайн сайта.

Фотошоп удивительная программа. Она позволяет не только создавать дизайн для интернет-ресурса, но и изменить его. Благодаря наличию специальных инструментов в photoshop пользователь может в любое удобное время добавить или удалить ненужный элемент, изменить как цвет, так и его форму, месторасположение на странице.

Photoshop для дизайна

Быстро создавайте проекты

Создавая документ в Photoshop, вместо чистого холста можно выбрать любой шаблон из большой коллекции в Adobe Stock. Шаблоны содержат ресурсы Stock и иллюстрации, используя которые можно оформить проект.

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

Библиотеки Creative Cloud Libraries

Библиотеки Creative Cloud на основе технологии Adobe CreativeSync предоставляют доступ к избранным ресурсам где и когда угодно на любом устройстве.

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

Шрифты SVG

В Photoshop поддерживаются шрифты SVG, включая эмодзи. Можно создать композицию из нескольких символов шрифта эмодзи SVG для создания новых глифов. Например, можно создать флаги стран или изменить цвет кожи для глифов, изображающих одного человека.

Работа с Adobe Experience Design CC (предварительная версия)

Добавляйте свои ресурсы Photoshop CC прямо в Adobe XD, новый универсальный инструмент для разработки дизайна и прототипирования пользовательского интерфейса веб-сайтов и мобильных приложений.

Монтажные области

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

Новые параметры экспорта

Теперь можно экспортировать монтажные области, слои, группы слоев или документы Photoshop как графические ресурсы JPEG, GIF, PNG, PNG-8 или SVG. Использование команд быстрого экспорта позволяет создавать материалы в часто используемых графических ресурсах одним щелчком. Внедряйте цветовые профили в файлы PNG или JPG. Настроить все параметры экспорта для удобной работы можно в меню «Установки».

Среда выделения и маскирования

Создавать выделения и маски точной формы в Photoshop стало еще проще и быстрее. Для этого была специально создана новая рабочая среда. С помощью таких инструментов, как кисть «Уточнить край» можно четко разделять элементы переднего и заднего плана, а также выполнять многие другие операции.

Подбор шрифта

Подбирайте конкретные шрифты и позвольте Photoshop CC выполнить за вас самую сложную работу. Благодаря интеллектуальному анализу изображений Photoshop CC может на основе внешнего вида латиницы автоматически определить тип шрифта и подобрать аналогичный лицензированный шрифт на компьютере или в Typekit.

Интеграция с Adobe Stock

Теперь при работе с ресурсами на веб-сайте Adobe Stock можно открывать выбранные ресурсы в Photoshop непосредственно с веб-сайта. Кроме того, в любую библиотеку можно добавить материалы с водяными знаками для предварительного просмотра или лицензированные шаблонные изображения. Затем такие изображения можно использовать в документах Photoshop как ресурсы, связанные с библиотекой.

Новый поиск с фильтрацией на сайте Adobe Stock и в ресурсах из вашей библиотеки значительно упрощает поиск нужных ресурсов. Кроме того, лицензированные ресурсы Adobe Stock помечаются значком для удобства, а видеоресурсы теперь имеют связанные предпросмотры.

Постоянный доступ к Photoshop

Такие приложения для мобильных устройств, как Photoshop Mix, Photoshop Sketch, Adobe Comp CC и Adobe Capture CC, расширяют возможности Photoshop, обеспечивая доступ к этому ПО на любом устройстве и позволяя создавать великолепные дизайны без доступа к настольному компьютеру. Попробуйте создать что-нибудь новое! Например, используйте Capture CC на мобильном устройстве для преобразования любого изображения в узор. Сохраните его в библиотеку Creative Cloud, а затем используйте в качестве узора или узорной заливки в проектах Photoshop.

Более быстрое выполнение повседневных задач

Теперь Photoshop CC быстрее открывает документы и реагирует на действия пользователя. Инструмент «Заливка с учетом содержимого» теперь работает практически в три раза быстрее и намного точнее. Меню «Шрифт» загружает список шрифтов в четыре раза быстрее.

Несколько стилей слоя

Вы можете без труда добавлять до 10 экземпляров выбранного стиля слоя, включая тени, наложения градиента и цвета, внутренние тени и обводки, к одному слою или группе слоев, а затем редактировать нужный стиль в любое время. Эта возможность позволяет забыть об эффектах растрирования или множестве наложений в различных группах слоев.

Работа с глифами

Используйте новую палитру «Глифы» для эффективной работы с глифами. Функции этой панели позволяют просматривать все доступные глифы в шрифте, находить альтернативы часто выбираемым вариантам, переходить к наиболее используемым глифам, просматривать и вставлять последние глифы, а также сортировать глифы для ускорения поиска. Применяйте альтернативные глифы для отдельных символов непосредственно через новое контекстное меню. Чтобы получить подробные сведения, например идентификатор глифа, значение «Юникод», имя «Юникод» и другие, наведите курсор на нужный глиф.

Практические работы 7-8. Создание макета главной страницы сайта в Photoshope

Идёт приём заявок

Подать заявку

Для учеников 1-11 классов и дошкольников

  • Соцкова Светлана НиколаевнаНаписать 1616 11.02.2018

Номер материала: ДБ-1154148

    11.02.2018 944
    11.02.2018 1047
    11.02.2018 360
    11.02.2018 841
    11.02.2018 1293
    11.02.2018 551
    11.02.2018 612
    11.02.2018 787

Не нашли то что искали?

Вам будут интересны эти курсы:

Все материалы, размещенные на сайте, созданы авторами сайта либо размещены пользователями сайта и представлены на сайте исключительно для ознакомления. Авторские права на материалы принадлежат их законным авторам. Частичное или полное копирование материалов сайта без письменного разрешения администрации сайта запрещено! Мнение редакции может не совпадать с точкой зрения авторов.

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

Создание дизайна сайта в фотошопе, размеры макета

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

Прочитать об этих моментах можно в статье, что нужно знать для разработки дизайна сайта кроме photoshop. Сегодня же речь пойдет о конкретной задаче, которую мы будем решать и узнаем какие нужно выбирать размеры, почему именно такие, а не другие. Рассматривать мы будим создание дизайна сайта с фиксированной шириной по центру.

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

Исходя из поставленной задачи мы понимаем, что нам необходимо рисовать под минимальное разрешение монитора, которого придерживаются на сегодняшний день, это 1024х768 пикселей.

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

А вот о ширине следует призадуматься, так какого размера делать то ее. А рисовать ширину тела сайта необходимо в 1003 пикселя, Вы спросите, почему 1003 пикселя, а не 1024, да потому как нужно учитывать боковой скроллинг у браузера, а он составляет немного не мало 21 пиксель.

Вот и получается, что тело нашего сайта должно быть 1003 пикселя, этот параметр гарантирует, что у вас не появится горизонтальный скроллинг у сайта. Так как бывают случаи, когда верстальщик верстает макет, под разрешение 1024х768 пикселей, после чего появляется горизонтальный скроллинг, благодаря которому небольшая, но все же, часть сайта находится вне пределов монитора пользователя.

А это уже как вы наверное понимаете мало того что некорректно смотрится но и вызывает неудобство для пользователя сайтом (потенциального клиента), это большой минус. Этот скроллинг появляется из-за того что дизайнер не учел что фиксированная ширина макета сайта 1003 пикселя, а верстальщик сверстал макет на 1024 пикселя. Конечно, это может быть и ошибка верстальщика, но сейчас не о верстке.

Итак, я думаю, мы поняли, что фиксированная часть макета максимально должна быть 1003 пикселя, она может быть и меньше, мы рассматриваем корректное отображение будущего сайта на минимальном разрешение монитора с 1024х768 пикс.

Я при создание дизайна сайта в фотошопе, использую размеры холста равные 1200 х 1800 пикс. Фиксированную ширину делаю в 1000 пикселей, а оставшиеся 200 пикселей разделяю пополам по 100 на правую и левую стороны соответственно, которые будут выполнять функцию резинки для остальных разрешений мониторов. Ниже я привел схему, каких размеров я создаю холст и разметку.

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

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

Дополнительный материал: для разработки адаптивного дизайна, вам потребуется создать не один макет как в примере выше, а гораздо больше. Разобраться в этом вопросе поможет небольшой дополнительный материал о размерах макета при создание адаптивного дизайна сайта.

Ссылка на основную публикацию