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. Это удобно, безопасно и быстро. О том, как открыть счет в этой системе, я расскажу в двух видеоуроках, которые записал специально для вас.
Как сделать верстку страниц в фотошопе
Фотошоп для верстальщика. Как работать с макетом и откуда брать данные?
Данная статья посвящается всем тем, кто только-только взялся за изучение верстки макетов, и тем, кто пока плохо разбирается в Adobe Photoshop. Моя цель рассказать откуда брать данные из PSD-файлов и научить приёмам, которые будут полезны всем верстальщикам.
Как вырезать и сохранять картинки?
Простые картинки, которые состоят из геометрических фигур, лучше всего описывать посредством CSS. Такой метод не будет нагружать сайт, а значит скорость загрузки не пострадает.
Если такой возможности нет, нам потребуется вырезать картинки из макета. Но стоит помнить, что некоторые картинки стоит сохранять по одной, а другие — лучше вывести в отдельный спрайт. Например, социальные иконки. Их я советую размещать в одной картинке. Выглядеть это будет примерно так:
Итак, чтобы вырезать картинку из макета, надо, во-первых, найти слой с картинкой.
Во-вторых, в окне «Слои» в нужном слое нажать на правую кнопку мыши и выбрать пункт «Создать дубликат слоя…». В диалоговом окне «Дубликат слоя» выбрать в выпадающем списке пункт «Новый».
Картинку перенесет в пустой документ по длине и ширине схожим с размерами прошлого макета. Искать в ней картинку бывает довольно проблематично, особенно, если она прозрачная. Чтобы этого не делать достаточно зажать Ctrl и кликнуть по иконке нужного слоя с картинкой. Он выделится пунктиром.
Далее в левой панели необходимо выбрать инструмент «Рамка». Весь документ затемнится, кроме нужной картинки.
Жмем Enter. Наша картинка готова.
Как правило, картинки сохраняют в JPEG и PNG-24.
Сохранение SVG картинок в Photophop
Чтобы сохранить картинку в формате SVG, достаточно кликнуть правой кнопкой мыши и кликнуть на «Экспортировать как…»
Далее появится диалоговое окно, в котором необходимо установить Формат SVG и нажать на «Экспортировать все». Важно, чтобы картинка в документе была одна.
Информация о font-family, font-size, line-height, color
Информация о margin и padding
Чтобы узнать сколько пикселей необходимо задать для отступа, достаточно включить Инструмент «Прямоугольная область» и потянуть курсор вниз (или влево), чтобы посмотреть расстояние в пикселях.
Этот метод я использую, как правило, чтобы узнать о высоте или ширине определенного элемента. Но для того, чтобы соблюсти pixel-perfect всего макета, обычно я использую расширение для Chrome с одноименным названием PerfectPixel. Чтобы его установить, нажмите здесь.
Информация об opacity
Довольно часто веб-дизайнеры делают элементы прозрачными. В css за это отвечает свойство opacity. К счастью, в Photoshop можно увидеть процент непрозрачности. Для этого достаточно кликнуть на слой, в котором применяется прозрачность и посмотреть в верхний правый угол окна «Слои». На скриншоте видно, что прямоугольный элемент имеет прозрачность в 90%. Следовательно, в css следует записать следующее: opacity: 0.9
Горячие клавиши Photoshop для верстака
В процессе верстки я применяю «горячие клавиши», которые значительно ускоряют работу в Photoshop. Список актуален для всех версий:
Ctrl + «-« — уменьшить масштаб
Ctrl + «+» — увеличить масштаб
Ctrl + «1» — масштаб 100%
Ctrl + J — создать дубликат слоя
Ctrl + [ — уменьшить размер кисти
Ctrl + ] — увеличить размер кисти
Ctrl + Alt + Z — шаг назад (отмена действия)
Ctrl + Shift + Z — шаг вперед (вернуть назад отменённое действие)
Ctrl + Alt + I — диалоговое окно «Размер изображения»
P.S. Скриншоты, приводимые в статье сделаны в программе Photoshop CC.
Тема оказалась довольно объемной и уместить все в рамках одной статьи — сложно. Но я для вас подготовила видеоролик, в котором я все подробно объясняю:
Как сделать макет или дизайн сайта в Photoshop
По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop. Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал?
Продолжение
В общем давайте уже делать.
Для начала я подготовил не сложный макет, который мы будем полностью с Вами разбирать. Вот как он выглядит:
Как видите, что шаблон получился не сложный, естественно это блоговый шаблон, который позже мы будем верстать в HTML. Ну а пока что только будем рисовать. Ну а теперь поехали.
Программное обеспечение
Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте
Создание и размеры документа
Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.
Размеры зависят от того какой ширины будет Ваш будущий сайт. Вот например, Вы решили, что готовый сайт будет иметь ширину 1000 рх, следовательно размер документа нужно сделать немного больше где то 1200 рх. Это делается в первую очередь для удобства, что бы Ваш макет смотрелся так же как в браузере.
По поводу высоты, выставляется размер от тематики шаблона. Но желательно делайте больше, 4000 рх думаю хватит. Это делается для того, чтобы в дальнейшем все элементы влезли. Потому что я как то сделал маленькую высоту, и мне пришлось потом переносить всё в новый документ.
В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.
Фон шаблона сайта
После того как мы создали документ, в первую очередь сделайте фон для сайта. Не важно, что это будет цвет или картинка но сделайте его. В моём случае это просто белый фон. Выбираем инструмент «Заливка» в палитре цветов выбираем белый цвет, затем просто кликаем по фону.
Ширина будущего сайта в 1200 рх
Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Если она у Вас не активна, нужно зайти в «Просмотр» и поставить галочку на против «Линейка». Затем она должна появиться у Вас в окне просмотра.
А вот как она выглядит:
Выделяем наш слой, нужно просто один раз кликнуть на него:
А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр. Для этого наводим курсор на линейку на ней же зажимаем левую кнопку мыши и вытягиваем линию на наш документ. Тянем примерно на середину, линейка сама найдёт центр.
После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх. Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.
Теперь нашу выделенную область помещаем с помощью мышки по центру, она найдёт центр сама. Затем нужно вытащить ещё 2 линейки и установить их по обе стороны выделенной области. Таким образом мы обозначаем границы нашего будущего сайта, который будет иметь ширину в 1200 рх. Так же по этим линейка будет проще подгонять элементы дизайна. Если Вам не понятно сделайте так же как на рисунке ниже.
Линейку мы будем использовать и в дальнейшем, так как без неё здесь не обойтись, она позволяет выставить всё ровно.
Теперь мы практически полностью подготовили наш документ. Мы узнали середину, а так же обозначили точный размер за который не нужно вылазить. Теперь переходим к самому интересному, а именно к созданию дизайна сайта (макета).
Создание дизайна или макета сайта
Важно!
Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!
Группы
Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.
Вот что должно получиться:
Верхнее меню
Опять вытягиваем линейку и выставляем её как на рисунке:
Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:
В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:
Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.
Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.
По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. Ставим галочки на против «Наложение цвета» И вбиваем туда вот этот цвет #0aaacc.
Переходим в пункт «Тень» и задаём следующие параметры:
Вот, что должно получиться:
После этого просто копируем слой с нашей линией и выставляем после каждого слова. Вот что у меня получилось:
Иконки социальных закладок
Здесь же в меню только с правой стороны мы добавим иконки закладок. В моём случае это фигуры, но можно поставить и обычные скачанные иконки. Скачать можете вот здесь.
Потом создаём группу, называем её «Социальные закладки», создаём в ней новый слой. Теперь кликаем по инструменту «Произвольная фигура» выбираем нужную фигуру:
Наводим курсор в то место где будет иконка, зажимаем Shift, (для того чтобы иконка появилась ровная) и растягиваем до нужных размеров. И такой же процесс повторяем со следующими фигурами. В конечном итоге вот что должно получиться:
Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.
Логотип
Переходим на этот сайт и качаем шрифт. Выбираем инструмент «Горизонтальный текст». Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:
Создаём группу «Нижнее меню» и новый слой.
Нижнее меню (Главное)
Выставляем линейки как на рисунке:
Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:
Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:
Добавляем название рубрик, кликаем по инструменту «Горизонтальный текст» и пишем название рубрик, делайте как у меня:
Добавляем линии. Делаются они так же как и в верхнем меню только изменён сам цвет линии. Думаю, что вы справитесь, и должно получиться вот что:
Сейчас переходим к панели с информацией, которая будет говорить пользователю где он находится на сайте.
Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.
Панель с информацией
Для начала добавляем полосы с линейки как на рисунке ниже:
Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000
Далее создаём новый слой, потом тем же инструментом выделяем область которая ниже и заливаем её вот этим цветом #eeeeee
Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:
Контент
Переходим к разметке середины нашего будущего сайта. Нам нужно с помощью линейки разметить где будут находиться блоки постов и блок сайтбара (Правой колонки).
Сразу же нужно создать 2 отдельных группы:
В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями.
Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:
Добавляем линии с линейки как на рисунке, и отменяем выделение:
Получается что мы добавили две линии и получили область где будут находиться наши блоки с записями.
В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.
Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:
Вот теперь мы точно знаем где будут блоки с записями и сайтбар. И всё будет ровно.
Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня:
Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.
Блоки с записями
Начнём мы пожалуй с блоков с записями, делаются они в данном случае очень просто.
В группе «Левый» создаём подгруппу «блок» и новый слой.
Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.
В той же группе добавьте метку с помощью текста как у меня на рисунке выше.
Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:
Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:
И описание к посту:
Сейчас давайте добавим кнопку Далее. Она тоже очень простая. Выбираем инструмент «Прямоугольник со скругленными углами» задаём ему вот это цвет #0dbfe5 и радиус углов в 2рх. И рисуем кнопку размера который Вам понравится:
Теперь добавляем текст и смотрим, что у нас получилось:
Чтобы записи хоть не много разделить, давайте создадим простой разделитель из кругов.
Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.
Отменяем выделение и ищем середину круга с помощью линейки
Выбираем слой с нашим кружком на нём же нажимаем правую кнопку мыши и выбираем «Создать дубликат слоя». Перетащите его немного влево.
В верхней панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным.
Вот что должно получиться:
Копируем слой этого маленького круга опять перемещаем его влево. Так же точно уменьшаем его размер как написано выше, чтобы получилось вот так:
Сейчас Вам нужно создать дубликат среднего круга и переместить его вправо, и тоже самое сделать с маленьким кругом. Чтобы было понятнее сделайте как на рисунке:
А вот что получилось только в нормальном размере:
Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.
Сайдбар (правая колонка)
Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:
Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee
Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск
Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.
Поле поиска готово. Теперь переходим к виджетам.
Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee
В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5
И конечно же нужно добавить записи к нашим виджетам. Нужно выбрать инструмент «горизонтальный текст», затем установить размер в 16 пт. И сделать ка на рисунке ниже
Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.
Вот теперь мы можем наблюдать почти готовый и простой макет для нашего будущего сайта.
Футер (Низ сайта)
Ну как же без него. В этом шаблоне он тоже не сильно сложный.
Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5
Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.
А с правой стороны нашего футера добавляем меню такое же как сверху только без линии. Его даже можно просто скопировать и переместить вниз.
Вот и всё, друзья, у нс готовый макет, который уже можно верстать
Ещё, вот Вам его PSD файл. Скачивайте, и смотрите если что то не поняли.
Скачать
Друзья, если Вам что нибудь будет не понятно, обязательно спрашивайте в комментариях.
Как сделать верстку в фотошопе
Этим уроком посвященным тому, как в фотошопе создать сайт для последующей верстки, я решила открыть цикл статей о том, как самостоятельно сделать вордпресс шаблон от разработки макета в фотошопе до создания полноценного шаблона, готового к использованию. Скажем спасибо авторитетному Line25 за реализацию этой идеи. Сначала мы сделаем гранжевый фон для шаблона, потом сформируем отдельный пост со всей вспомогательной информацией. Далее мы займемся сайдбаром и сформируем боковое меню, поисковую строку, текстовые блоки.
Шаг 1.
Создаем в фотошопе новый документ. Заливаем его белым цветом. Потом воспользуемся этим набором гранжевых кистей. Посередине документа щелкаем мышкой с одной из кисточек.
Шаг 2.
Выделяем квадрат посередине гранжевого пятна. Инвертируем выделение и удаляем все лишнее. Авторы предлагают методом эксперимента подобрать такой кусок, чтобы он подходил в качестве паттерна. Можно также воспользоваться уроком «Как в фотошопе за несколько шагов сделать бесшовную текстуру«.
Шаг 3.
Снижаем прозрачность слоя до 30%. Делаем несколько дубликатов слоя в новом документе, чтобы проверить как соприкасаются стороны. Если есть какие-то изъяны, то воспользуйтесь инструментом «Штамп» (Clone tool), чтобы исправить.
Шаг 4.
После того, как паттерн готов, выбираем «Редактирование» (Edit) > «Определить узор» (Define Pattern).
Шаг 5.
Теперь создаем в фотошопе новый документ, в котором мы будем делать шаблон сайта. Заливаем фон созданным паттерном. В центре создаем белый прямоугольник шириной 960 пикселей.
Шаг 6.
Зададим белому слою стили слоя. Сначала «Обводка» (Stroke) — размер 1 пиксель, цвет светло-серый. Потом «Тень» (Dropdown Shadow) — размер 10 пикселей, цвет черный, прозрачность 6%, смещение и размах 0.
Шаг 7.
На новом слое создаем прямоугольник под лого и заливаем его насыщенным красным цветом.
Шаг 8.
Зададим стиль слоя «Наложение градиента» (Gradient Overlay), режим наложения «Перекрытие» (Overlay). Почти наполовину снизим прозрачность.
Шаг 9.
Потом зададим однопиксельную «Обводку» (Stroke) более темным цветом, чем мы использовали в Шаге 7. Затем используем стиль слоя «Внутреннее свечение» (Inner Glow). Используем цвет уже более светлый, чем в Шаге 7. Размер также 1 пиксель.
Шаг 10.
Далее нам предлагается использовать кисти, для того, чтобы задать текстуру для поверхности лого. Режим наложения «Перекрытие» (Overlay).
Шаг 11.
Далее на новом слое белым цветом пишем слова лого. Автор использовал платный шрифт. Поэтому мы можем воспользоваться каким-нибудь из шрифтов для написания логотипов.
Шаг 12.
Украсим лого звездами. А потом применим стиль слоя «Тень» (Dropdown Shadow), чтобы текст стал более рельефным.
Шаг 13.
Воспользуемся подходящими иконками из этого набора иконок. Справа от иконок пишем текст темно красным цветом из Шага 7.
Шаг 14.
Теперь будем формировать пост. Напишем название поста и поставим любую превьюшку для поста.
Шаг 15.
Пишем текст, так, чтобы он обтекал картинку.
Шаг 16.
После поста создаем поле для вспомогательной информации. Используем светло-серый цвет.
Шаг 17.
Теперь для серого прямоугольника задаем стили слоя. Сначала однопиксельная «Обводка» (Stroke) снаружи, тем же цветом, что и основная заливка прямоугольника. Потом однопиксельное «Inner Glow» (Внутреннее свечение) белым цветом, «Стягивание» (Сhoke) 100%. Должен получиться эффект двойной обводки.
Шаг 18.
Используя два цвета, темно-серый и насыщенный красный, пишем вспомогательную информацию в сером блоке.
Шаг 19.
Теперь у нас есть сообщения о дате, категории и ссылка «Читать далее». Дату и категории можно разделить декоративной белой звездочкой.
Шаг 20.
Объединяем все элементы, относящиеся к первому посту в отдельную папку и делаем дубликат папки, для того, чтобы сделать второй пост. Меняем название поста и картинку-предпросмотр.
Шаг 21.
Теперь оформим кнопку навигации «Ранние посты».
Шаг 22.
Теперь займемся оформлением сайдбара. Используя те же, что и ранее оформительские элементы, оформляем боковое меню.
Шаг 23.
Оформляем блок поиска. Пишем текст «Поиск». Делаем белый прямоугольник с однопиксельной серой обводкой. Это будет поле поиска. А рядом делаем круг серого цвета, где мы разместим значок поиска.
Шаг 24.
Поверх серого круга создаем еще один круг такого же цвета и задаем ему стиль слоя «Обводка» (Stroke), 2 пикселя.
Шаг 25.
После этого приделываем белую ручку для лупы.
Шаг 26.
Создаем следующий текстовой блок, используя все те же принципы форматирования текста, что и ранее.
Шаг 27.
Теперь под все блоки сайдбара подведем единую подложку светло-серого цвета.
Шаг 28.
Создаем значок прокрутки вверх и соответствующую надпись рядом.
Финал
Вот и все, наш шаблон сайта готов. Щелкните по изображению, чтобы посмотреть картинку в большом размере.
Урок фотошоп — Как сделать дизайн сайта? Просто!
Дорогие друзья, сегодня я хочу показать вам как можно сделать дизайн сайта в фотошопе.
p, blockquote 1,0,0,0,0 —>
Урок получился очень большим и думаю будет полезным для вас.
p, blockquote 2,0,0,0,0 —>
Урок фотошоп как сделать дизайн сайта
Изучив данный урок вы научитесь самостоятельно делать дизайн сайта в psd формате, также вы научитесь работать с формами, линейкой, направляющими, изменять размер документа и многое другое.
p, blockquote 3,0,0,0,0 —>
Будем делать вот такой дизайн. У меня стоит Photoshop CS5 (английская версия, не люблю русские версии программ).
p, blockquote 4,0,0,0,0 —>
p, blockquote 5,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 6,0,0,0,0 —>
p, blockquote 7,0,0,0,0 —>
Если по какой то причине вы не хотите изучать урок и хотите просто скачать дизайн сайта в psd формате — кликайте сюда и качайте
p, blockquote 8,0,0,0,0 —>
Если вам интересно самому/ой научиться делать такие дизайны этот урок для вас.
p, blockquote 9,0,0,0,0 —>
Для работы с дизайном нам понадобятся следующие файлы (скачать файлы одним архивом):
p, blockquote 10,0,0,0,0 —>
— фон с бабочками (для шапки сайта);
— шрифты;
— картинка c девушками;
— картинки для слайдера;
— иконки социальных сервисов;
— картинки для новостей;
— картинка рассылки;
— картинка счетчика.
p, blockquote 11,0,0,0,0 —>
Перед началом работы разделим наш дизайн на составляющие:
p, blockquote 12,0,0,0,0 —>
p, blockquote 13,0,0,0,0 —>
1. Фон и подложка для сайта;
2. Шапка сайта (состоит из логотипа и текста, тематической картинки, фона и основного навигационного меню)
3. Слайдер, в просторечье карусель;
4. Поиск по сайту;
5. Основной контент (сами новости);
6. Сайдбар — боковая колонка (блок последние новости, блок социальные сервисы, блок подписка, блок голосование)
7. Пейжер — постраничная навигация по сайту;
8. Футер — нижняя часть сайта.
p, blockquote 14,0,0,0,0 —>
Приступим к созданию нашего дизайна в фотошопе.
p, blockquote 15,0,0,0,0 —>
Настройка фотошопа
p, blockquote 16,0,0,0,0 —>
1. Открываем фотошоп и создаем новый документ File→New (Файл→Новый или CTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши — если такое действие будет встречаться в уроке еще раз, я буду использовать уже только горячие клавиши, которые позволяют экономить время в программе фотошоп).
p, blockquote 17,0,0,0,0 —>
В окошке я указал следующие параметры:
p, blockquote 18,0,0,0,0 —>
p, blockquote 19,0,0,0,0 —>
2. Перед началом работы произведем некоторые настройки фотошопа:
p, blockquote 20,0,0,0,0 —>
— устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами).
p, blockquote 21,0,0,0,0 —>
p, blockquote 22,0,0,0,0 —>
— поставим галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем.
p, blockquote 23,0,0,0,0 —>
p, blockquote 24,0,0,0,0 —>
— отобразим палитру History (История) идем Windows→ History — с помощью этой палитры можно отменять предыдущие действия сделанные в фотошопе (также работают горячие клавишы Ctrl+Z и Ctrl+Alt+Z.
p, blockquote 25,0,0,0,0 —>
p, blockquote 26,0,0,0,0 —>
— включаем шкалу-линейку для документа, идем Views→Rules (Вид→Линейки или CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.
p, blockquote 27,0,0,0,0 —>
p, blockquote 28,0,0,0,0 —>
Сразу же следует убедиться, что данные на линейке отображаются в пикселях. Для этого щелкаем дважды мышкой по самой шкале с линейкой и выбираем такие параметры:
p, blockquote 29,0,0,0,0 —>
p, blockquote 30,0,0,0,0 —>
Далее используя направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаем места под основные элементы шапки:
p, blockquote 31,0,0,0,0 —>
p, blockquote 32,0,0,0,0 —>
Если вы только начинаете пользоваться фотошопом, направляющие помогут вам при создании/рисовании обектов в фотошопе.
p, blockquote 33,0,0,0,0 —>
Создание фона и подложки для сайта
p, blockquote 34,0,0,0,0 —>
3. Открываем файл с фоном File→Open (Файл→Открыть или CTRL+O, фаил fon.jpg из архива). Полностью выделяем наш документ — нажимаем CTRL+A. Делаем из нашего рисунка фон в фотошопе, идем во вкладочку Edit→ Define Patter (Правка→ Определить узор), пишем название (я написал pattern).
p, blockquote 35,0,0,0,0 —>
p, blockquote 36,0,0,0,0 —>
p, blockquote 37,0,0,0,0 —>
4. Переходим на наш основной документ, идем Edit→Fill (Правка→ Заливка, SHIFT+F5), в окошке выбираем Pattern, далее выбираем иконку с нашим патерном и нажимаем OK (заливаем наш фон созданным паттерном).
p, blockquote 38,0,0,0,0 —>
p, blockquote 39,0,0,0,0 —>
p, blockquote 40,0,0,0,0 —>
5. Теперь создадим белую подложку для нашего дизайна. Создаем новый слой, идем Layer→ New→Layer (Слой→ Новый→ Слой). Даем ему любое название и жмем OK. В палитре со слоями (Windows→ Layers, Окно→ Слои, F7) должен появится новый слой.
p, blockquote 41,0,0,0,0 —>
p, blockquote 42,0,0,0,0 —>
p, blockquote 43,0,0,0,0 —>
p, blockquote 44,0,0,0,0 —>
Сейчас нам помогут направляющие (щелкаем по линейке и тянем мышку вправо сделаем одну направляющую, а потом вторую — на глаз делаем что бы расстояние слева и справа было примерно одинаковым).
p, blockquote 45,0,0,0,0 —>
Удобно делать выделение с направляющими (если нужен точный размер области), но можно обойтись и без них (на глаз).
p, blockquote 46,0,0,0,0 —>
После этого берем инструмент 
Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область.
p, blockquote 47,0,0,0,0 —>
p, blockquote 48,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 49,0,0,0,0 —>
Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool (Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow (Отбрасывать тень) — цвет выбрал #5F1338:
p, blockquote 50,0,0,0,0 —>
p, blockquote 51,0,0,0,0 —>
На этом с фоном закончим и перейдем к созданию шапки для сайта.
p, blockquote 52,0,0,0,0 —>
Делаем шапку для сайта
p, blockquote 53,0,0,0,0 —>
6. В начале создадим фон для шапки, из предложенного мною архива берем файл batterfly.jpg, открываем его в фотошопе File→Open. Теперь нужно перенести слой с картинкой в наш основной докумени. Для этого выбираем инструмент 
Move Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя).
p, blockquote 54,0,0,0,0 —>
p, blockquote 55,0,0,0,0 —>
В появившемся окошке вваодим название слою (я назвал fon-header), чуть ниже в поле Document (Документ) выбираем документ в который нужно вставить слой, у нас woman-design-blogohelp.psd и нажимаем OK.
p, blockquote 56,0,0,0,0 —>
p, blockquote 57,0,0,0,0 —>
Слой должен вставиться ровно посередине документа.
p, blockquote 58,0,0,0,0 —>
p, blockquote 59,0,0,0,0 —>
Теперь передвинем наш слой в самый верх, это можно сделать 2 способами:
p, blockquote 60,0,0,0,0 —>
Первый способ: берем инструмент Move Tool, кликаем по нашему слою с бабочками и не отпуская кнопку мыши еще нажимем клавишу Shift (что бы слой двигался равно вверх) и после этого тянем мышку вверх и в нужном месте расспологаем наш слой.
p, blockquote 61,0,0,0,0 —>
Второй способ: выбираем слой с бабочками и слой с фоном в палитре Layers (F7)
p, blockquote 62,0,0,0,0 —>
p, blockquote 63,0,0,0,0 —>
После этого в настройках элемента Move Tool , выбираем иконку Align top edges (Выравнить обекты по верхнему краю):
p, blockquote 64,0,0,0,0 —>
p, blockquote 65,0,0,0,0 —>
В итоге у нас получилось:
p, blockquote 66,0,0,0,0 —>
p, blockquote 67,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 68,0,1,0,0 —>
Я специально сделал фон с бабочками больше белого фона, сейчас расскажу как удалить лишние края слева и справа. Теперь выбираем мышкой наш слой с бабочками и берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область — выделяя наш ненужный кусок. После того как вы нарисовали область ее можно двигать клавишами Вверх, вниз, право, влево.
p, blockquote 69,0,0,0,0 —>
p, blockquote 70,0,0,0,0 —>
Далее просто нажимаем Delete и удаляем ненужную нам часть слоя. По анологии делаем с правым кусочком слоя. После этого для слоя fon-header, не снимая выделение со слоя, установим ему Opacity (Непрозрачность) в 20%.
p, blockquote 71,0,0,0,0 —>
p, blockquote 72,0,0,0,0 —>
7. Теперь сделаем небольшое затемние вверху шапки. Создаем новый слой — Shift+Ctrl+N. Даем ему любое название (у меня shadow-top) и жмем OK.
p, blockquote 73,0,0,0,0 —>
После этого не снимая выделения со слоя shadow-top нажимаем Ctrl и не отпуская его кликаем по иконке слоя fon-header.
p, blockquote 74,0,0,0,0 —>
p, blockquote 75,0,0,0,0 —>
p, blockquote 76,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 77,0,0,0,0 —>
После этого заливаем слой любым цветом — Alt+Backspace и идем в свойства слоя (кликаем два раза по слою). Снимае выделение, нажимаем Ctrl+H. Далее выбираем свойство Gradient Overlay (Заливка градиентом) и ставим такие свойства:
p, blockquote 78,0,0,0,0 —>
p, blockquote 79,0,0,0,0 —>
Далее кликаем по полоске с градиентом и ставим такие цвета:
p, blockquote 80,0,0,0,0 —>
p, blockquote 81,0,0,0,0 —>
Теперь нужно слой с затемнением (shadow-top) поместить ниже слоя (fon-header). Жмем F7, выбираем нужный нам слой, хватаем его мышкой и переносим на порядок ниже (так же можно менять порядок слоев используя клавиши Ctrl+> — опустить слой на порядок или Ctrl+ — поднять слой на порядок).
p, blockquote 82,0,0,0,0 —>
p, blockquote 83,0,0,0,0 —>
p, blockquote 84,0,0,0,0 —>
Делаем логотип для сайта
p, blockquote 85,0,0,0,0 —>
8. Фон готов теперь давайте напишем наш текст и нарисуем логотип. Берем инструмент 
Horizontal Type Tool (Горизонтальный текст, T) и щелкаем на шапке в том месте, в котором планируем написать надпись — у меня это WomanSite.ru, и пишем ее. Настройки для надписи я задал такие:
p, blockquote 86,0,0,0,0 —>
p, blockquote 87,0,0,0,0 —>
Если у вас на компьютере нет такого шрифта, то его можно взять из моего архива.
p, blockquote 88,0,0,0,0 —>
C помощью инструмента Move Tool (V), расположил текст в нужном мне месте.
p, blockquote 89,0,0,0,0 —>
p, blockquote 90,0,0,0,0 —>
Далее с помощью этого же инструмента Horizontal Type Tool (Горизонтальный текст), выделим текст «Woman» и поменяем его цвет на другой #c9584a.
p, blockquote 91,0,0,0,0 —>
p, blockquote 92,0,0,0,0 —>
Точно так же поступим и с текстом «Site.ru», только цвет поставим #797878.
p, blockquote 93,0,0,0,0 —>
p, blockquote 94,0,0,0,0 —>
Сделаем обводку и тень нашему тексту. Кликаем два раза по слою и ставим галочки напротив Drop Shadow и Stroke (Обводка).
p, blockquote 95,0,0,0,0 —>
p, blockquote 96,0,0,0,0 —>
p, blockquote 97,0,0,0,0 —>
На этом с текстом все, переходим к логотипу.
p, blockquote 98,0,0,0,0 —>
9. Я хочу познакомить вас с основами рисования логотипов в фотошопе. Будем делать вот такой логотипчик (логотип сделан в виде завитушек, всего их 7 штук), на основе моего, который можно взять в заготовленном мною архиве.
p, blockquote 99,0,0,0,0 —>
p, blockquote 100,0,0,0,0 —>
Открываем в фотошопе файл logo.jpg, переносим картинку логотипа в основной документ и расплагаем рядом с текстом.
p, blockquote 101,0,0,0,0 —>
p, blockquote 102,0,0,0,0 —>
Слою с логотипом задаем Opacity (Непрозрачность) — 25% и отключаем видимость некоторых слоев — что бы не мешали (убираем иконку глазика напротив слоя в палитре Layers, F7)
p, blockquote 103,0,0,0,0 —>
p, blockquote 104,0,0,0,0 —>
Логотип будем рисовать (можно сказать отрисовывать) с помощью путей, они, так же называют векторными элементами или векторное включение в растровую картинку (кому интересно, подробнее про пути можно почитать тут).
p, blockquote 105,0,0,0,0 —>
Кроме палитры Layers (F7), нам так же понадобится палитра Path (Пути). Что бы ее отобразить идем WIndows→Path (Окна→Пути).
p, blockquote 106,0,0,0,0 —>
Далее с помощью лупы (инструмент 
Zoom tool, Увеличитель , Z) приблизим нашу область перед текстом. Я увеличил на 500%.
p, blockquote 107,0,0,0,0 —>
p, blockquote 108,0,0,0,0 —>
Берем инструмент Pen Tools (Перышко, P) , поставим ему такие настройки:
p, blockquote 109,0,0,0,0 —>
p, blockquote 110,0,0,0,0 —>
после этого начинаем рисовать первую завитушку — один раз кликаем мышкой в нужном нам месте и получаем первый узелок нашего будущего пути или контура:
p, blockquote 111,0,0,0,0 —>
p, blockquote 112,0,0,0,0 —>
Далее рисуем второй узелок, кликаем мышкой чуть ниже и левее предыдущего узла, не отпускаем мыши ведем ее вдоль нашего контура:
p, blockquote 113,0,0,0,0 —>
p, blockquote 114,0,0,0,0 —>
p, blockquote 115,0,0,0,0 —>
p, blockquote 116,0,0,0,0 —>
p, blockquote 117,0,0,0,0 —>
p, blockquote 118,0,0,0,0 —>
p, blockquote 119,0,0,0,0 —>
p, blockquote 120,0,0,0,0 —>
p, blockquote 121,0,0,0,0 —>
p, blockquote 122,0,0,0,0 —>
p, blockquote 123,0,0,0,0 —>
p, blockquote 124,0,0,0,0 —>
p, blockquote 125,0,0,0,0 —>
p, blockquote 126,0,0,0,0 —>
p, blockquote 127,0,0,0,0 —>
По аналогии делаем остальные 6 завитушек.
p, blockquote 128,0,0,0,0 —>
p, blockquote 129,0,0,0,0 —>
На этом создание логотипа закончено. С помощью стилей слоев закрасим каждую завитушку градиентом. Кликаем по нужному слою два раза и в настройках слоя Gradient Overlay (Градиентная заливка) заливаем его нужным нам градиентом.
p, blockquote 130,0,0,0,0 —>
В итоге у меня получилось.
p, blockquote 131,0,0,0,0 —>
p, blockquote 132,0,0,0,0 —>
После этого обьеденим все слои с нашими путями, выделяем все слои в палитре Layers и обьеденяем, нажимаем Ctrl+E.
p, blockquote 133,0,0,0,0 —>
p, blockquote 134,0,0,0,0 —>
Для полученного слоя применим эффекты с текстового слоя. Выбираем слой с текстом, кликаем правой кнопкой мыши и в открывшемся списке выбираем Copy Layer Style. Выбираем слой с нашим логотипом и вставляет эффекты, правой кнопкой и в меню выбираем Past Layer Style.
p, blockquote 135,0,0,0,0 —>
p, blockquote 136,1,0,0,0 —>
10. Теперь сделаем горизонтально тектовое меню. Нам понадобиться инструмент 
Raunded Rectangle Tool ()
p, blockquote 137,0,0,0,0 —>
p, blockquote 138,0,0,0,0 —>
настройки поставим такие:
p, blockquote 139,0,0,0,0 —>
p, blockquote 140,0,0,0,0 —>
Далее просто рисуем наш фон с закругленными углами и радиусом скругления в 10 пикселей:
p, blockquote 141,0,0,0,0 —>
p, blockquote 142,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 143,0,0,0,0 —>
Теперь поверх напишем наш текст, все тем же инструментом Horizontal Type Tool (Горизонтальный текст), я выбрал белый цвет #FFFFFF. Выставил такие настройки:
p, blockquote 144,0,0,0,0 —>
p, blockquote 145,0,0,0,0 —>
p, blockquote 146,0,0,0,0 —>
В итоге получилось.
p, blockquote 147,0,0,0,0 —>
p, blockquote 148,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 149,0,0,0,0 —>
Теперь вставим нашу тематическу картинку, открываем файл ladies.png, копируем слой с нашей картинкой в основной документ и в палитре Layers переносим слой с картинкой ниже нашего меню. В итоге у меня получилась, вот такая симпатичная шапка для нашего сайта.
p, blockquote 150,0,0,0,0 —>
p, blockquote 151,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 152,0,0,0,0 —>
Делаем слайдер для сайта
p, blockquote 153,0,0,0,0 —>
11. Теперь давайте сделаем дизайн слайдера для сайта. Создаем новый слой Ctrl+Shift+N. С помощью напрвляющих определим место под слайдер. Далее берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область.
p, blockquote 154,0,0,0,0 —>
p, blockquote 155,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 156,0,0,0,0 —>
Заливаем ее любым цветом, после этого применим к этому слою градиентную заливку:
p, blockquote 157,0,0,0,0 —>
p, blockquote 158,0,0,0,0 —>
p, blockquote 159,0,0,0,0 —>
Напишем поверх текст «Лучшее на сайте».
p, blockquote 160,0,0,0,0 —>
p, blockquote 161,0,0,0,0 —>
12. Далее рисуем фон для нашего слайдера так же инструментом Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область. Создаем новый слой Ctrl+Shift+N и заливаем любым цветом (у меня #FFD9DE).
p, blockquote 162,0,0,0,0 —>
p, blockquote 163,0,0,0,0 —>
13. Фон сделали, теперь сделаем подложку поверх фона, для этого уменьшим нашу выделенную область на 4 пикселя, идем Select — Modify — Contact (Выделить-Изменить-Уменьшить).
p, blockquote 164,0,0,0,0 —>
Создаем новый слой Ctrl+Shift+N и заливаем ее белым цветом — #FFFFFF.
p, blockquote 165,0,0,0,0 —>
p, blockquote 166,0,0,0,0 —>
Далее не снимая выделения, при выбранном слое с нашей подложкой, с помощью еще одной направляющей поделим слой на 2 неравные части (слева будет большая часть, а справа чуть меньше).
p, blockquote 167,0,0,0,0 —>
Снимаем наше выделение, нажимаем Ctrl+H. Слева у нас будет большая тематическая картинка с описанием, а справа будет 4 маленьких картинки с описанием.
p, blockquote 168,0,0,0,0 —>
p, blockquote 169,0,0,0,0 —>
Картинки можно трансформировать с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T)
p, blockquote 170,0,0,0,0 —>
Картинки я подготовил (файлы slider-base-picture.jpg, slider-picture1.jpg, slider-picture2.jpg, slider-picture3.jpg, slider-picture4.jpg), открываем их в фотошопе и переносим в наш основной документ. Распологаем как нам нужно, у меня получилось.
p, blockquote 171,0,0,0,0 —>
p, blockquote 172,0,0,0,0 —>
14. Создаем подложку для основной картинки — создаем новый слой Ctrl+Shift+N, рисуеv пряямоугольное выделение и заливаем его цветом #e15c6c. Для этого слоя поставим Opacity (Непрозрачность), поставим в 90%.
p, blockquote 173,0,0,0,0 —>
p, blockquote 174,0,0,0,0 —>
Поверх нее пишем наш текст.
p, blockquote 175,0,0,0,0 —>
p, blockquote 176,0,0,0,0 —>
После этого рядом с 4 картинками тоже напишем нужный текст.
p, blockquote 177,0,0,0,0 —>
p, blockquote 178,0,0,0,0 —>
На этом со слайдером все, переходим к следующему пункту — Поиск по сайту.
p, blockquote 179,0,0,0,0 —>
Делаем дизайн блока поиск по сайту
p, blockquote 180,0,0,0,0 —>
15. Создаем новый слой Ctrl+Shift+N. Чуть ниже слайдера рисуем прямоугольную область и заливаем #ccf8aa.
p, blockquote 181,0,0,0,0 —>
p, blockquote 182,0,0,0,0 —>
16. Поверх пишем наш текст «Поиск по сайту:», далее берем инструмент Raunded Rectangle Tool (), угол скругления ставим 5 пикслей и рисуем форму поиска. Поверх формы пишем текст «Введите слово или словосочетание…», после этого делаем кнопку для поиска.
p, blockquote 183,0,0,0,0 —>
Так же инструментом Raunded Rectangle Tool () рисуем нашу кнопку и поверх наш текст «Найти».
p, blockquote 184,0,0,0,0 —>
В итоге у меня получилось.
p, blockquote 185,0,0,0,0 —>
p, blockquote 186,0,0,0,0 —>
Делаем оформление блока с новостями
p, blockquote 187,0,0,0,0 —>
17. Теперь переходим к рисованию самих новостей на сайте. Фон блока будем делать с помощью путей. Берем инструмент 
Rectangle Tool и рисуем прямоугольную область. Эту область можно трансформировать с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T).
p, blockquote 188,0,0,0,0 —>
p, blockquote 189,0,0,0,0 —>
Теперь поверх напишем текст — загголовок для первой новости, все тем же инструментом Horizontal Type Tool (Горизонтальный текст), я выбрал белый цвет #b14757. Выставил такие настройки:
p, blockquote 190,0,0,0,0 —>
p, blockquote 191,0,0,0,0 —>
18. Далее открываем ранее заготовленные мною картинки для новостей (файлы news-picture1.jpg, news-picture2.jpg, news-picture3.jpg, news-picture4.jpg, news-picture5.jpg). Берем первую и распологаем снизу под заголовком.
p, blockquote 192,0,0,0,0 —>
19. После этого пишем текст справа от картинки. Все тем же инструментом Horizontal Type Tool (Горизонтальный текст), я выбрал черный цвет #000000. Только теперь мы не просто кликаем инструментом, а кликаем и не отпуская мыши тянем вправо.
p, blockquote 193,0,0,0,0 —>
p, blockquote 194,0,0,0,0 —>
далее пишем наш текст и чуть ниже вставляем текст «Читать далее>>».
p, blockquote 195,0,0,0,0 —>
p, blockquote 196,0,0,0,0 —>
20. Чуть ниже сделаем разделительную полоску. Полоска будет выполнена в виде пунктирной линии размером в 1 пиксель. Создаем новый слой Shift+Ctrl+N. Берем инструмент 
Pencil Tool (Карандаш). Цвет для рисования я выбрал: #c8c8c8. Теперь давайте настроим наш карандашь, жмем F5 и ставим вот такие настройки:
p, blockquote 197,0,0,0,0 —>
p, blockquote 198,0,0,0,0 —>
И после этого рисуем нашу разделительную линию (с нажатой клавишей Shift).
p, blockquote 199,0,0,0,0 —>
p, blockquote 200,0,0,0,0 —>
21. После этого по аналогии делаем наши остальные 4 новости.
p, blockquote 201,0,0,0,0 —>
p, blockquote 202,0,0,0,0 —>
Делаем оформление пейжера
p, blockquote 203,0,0,0,0 —>
22. Теперь давайте сделаем Пейжер — постраничнyю навигацию по сайту. Берем инструмент Rectangle Tool и рисуем прямоугольную форму. Что бы форма получалась квадратной, рисуем ее вместе с нажатой клавишей Shift. Так же форму можно трансформировать с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T).
p, blockquote 204,0,0,1,0 —>
p, blockquote 205,0,0,0,0 —>
После этого напишем наш текст.
p, blockquote 206,0,0,0,0 —>
p, blockquote 207,0,0,0,0 —>
Делаем сайдбар
p, blockquote 208,0,0,0,0 —>
23. Нам осталось сделать Сайдбар (оформление боковой колонки сайта) и Футер (оформления низа сайта).
p, blockquote 209,0,0,0,0 —>
Начинаем рисовать первый блок «Популярное на сайте», берем инструмент Rectangle Tool и рисуем прямоугольную форму.
p, blockquote 210,0,0,0,0 —>
p, blockquote 211,0,0,0,0 —>
Для этого слоя применим эффекты Color Overlay (Заливка фоном) и Stroke (Обводка).
p, blockquote 212,0,0,0,0 —>
p, blockquote 213,0,0,0,0 —>
24. Сделаем шапку для блока, берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область. Далее уменьшим нашу выделенную область на 1 пиксель, идем Select — Modify — Contact (Выделить-Изменить-Уменьшить). И в окошке поставим единичку и жмем ОК.
p, blockquote 214,0,0,0,0 —>
Создаем новый слой Ctrl+Shift+N и заливаем любым цветом.
p, blockquote 215,0,0,0,0 —>
p, blockquote 216,0,0,0,0 —>
p, blockquote 217,0,0,0,0 —>
Далее для слоя с шапкой блока применяем свойство слоя Gradient Overlay (Градиентная заливка) и прверх напишем наш текст «Популярное на сайте «.
p, blockquote 218,0,0,0,0 —>
p, blockquote 219,0,0,0,0 —>
Для слоя с фоном блока применим эффект Color Overlay (заливка цветом) цветом и Stroke (обводка) цветом #FFC486.
p, blockquote 220,0,0,0,0 —>
p, blockquote 221,0,0,0,0 —>
25. Пишем текст наших популярных новостей.
p, blockquote 222,0,0,0,0 —>
p, blockquote 223,0,0,0,0 —>
Рядом с каждой новостью сделаем иконочку-маркер, откроем мой заготовленный файл marker.png название_файла.jpg, копируем слой с маркером в наш основной документ и инструментом Move Tool распологаем наш маркер рядом с названием новости, далее копируем (Ctrl+J) этот слой 4 раза и распологаем в нужных нам местах.
p, blockquote 224,0,0,0,0 —>
p, blockquote 225,0,0,0,0 —>
26. Перейдем к следующему блоку с социальными кнопками. Блок делается по аналогии с предыдущим, только для шапки блога используем такой градиент . Текст пишем «Присоединяйтесь к нам в:».
p, blockquote 226,0,0,0,0 —>
p, blockquote 227,0,0,0,0 —>
а для фона такие эффекты: заливка белым цветом и обводка цветом #95d9ee.
p, blockquote 228,0,0,0,0 —>
p, blockquote 229,0,0,0,0 —>
Иконки берем из моего приготовленного архива: twitter.png, facebook.png, vkontakte.png.
p, blockquote 230,0,0,0,0 —>
Вставляем иконки в наш документ и распологаем в нашем блоке. Ниже делаем текст для социалок.
p, blockquote 231,0,0,0,0 —>
p, blockquote 232,0,0,0,0 —>
27. Далее рисуем блок подписки. Делаем фон для блока, делаем шапку блоку, пишем текст, картинку берем из архива название картинки subscribe.jpg, делаем форму подписки и кнопочку «Подписаться» (форму мы уже делали когдарисовали блок Поиск по сайту) и распологаем как на рисунке.
p, blockquote 233,0,0,0,0 —>
p, blockquote 234,0,0,0,0 —>
28. Далее рисуем блок Голосование на сайте. Все по аналогии с предыдущими блоками. Только еще вставим переключатель Radiobutton. Берем файл из архива и вставляем в наш документ.
p, blockquote 235,0,0,0,0 —>
p, blockquote 236,0,0,0,0 —>
На этом с блоками все, перейдем к созданию нижней части сайта — Футеру.
p, blockquote 237,0,0,0,0 —>
Рисуем футер для сайта
p, blockquote 238,0,0,0,0 —>
29. Создаем новый слой. В самом низу сайта рисуем прямоугольное выделение инструментом Rectangular Marque Tool (Прямоугольное выделение, M), заливаем его любым цветом. Далее делаем этому слою градиентную заливку.
p, blockquote 239,0,0,0,0 —>
p, blockquote 240,0,0,0,0 —>
После этого сделаем разделительную полоску (между футером и пейжером). Ее тоже зальем градиентной заливкой.
p, blockquote 241,0,0,0,0 —>
p, blockquote 242,0,0,0,0 —>
p, blockquote 243,0,0,0,0 —>
p, blockquote 244,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 245,0,0,0,0 —>
p, blockquote 246,0,0,0,0 —>
30, Далее пишем текст для меню. Я выбрал цвет и для инструмента поставил такие настройки.
p, blockquote 247,0,0,0,0 —>
p, blockquote 248,0,0,0,0 —>
p, blockquote 249,0,0,0,0 —>
Получилось вот так.
p, blockquote 250,0,0,0,0 —>
p, blockquote 251,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 252,0,0,0,0 —>
p, blockquote 253,0,0,0,0 —>
31. Чуть ниже сделаем полоску разделитель. Приблизим место под текстовым меню с помощью лупы. Создаем новый слой, берем инструмент Pencil Tool (Карандаш). Кисть ставим в 1 пиксель, цвет берем #f2cbcf и рисуем линию. Сразу под ней рисуем еще одну линию цветом #ffe4e6.
p, blockquote 254,0,0,0,0 —>
p, blockquote 255,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 256,0,0,0,0 —>
В итоге у меня получилось
p, blockquote 257,0,0,0,0 —>
p, blockquote 258,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 259,0,0,0,0 —>
p, blockquote 260,0,0,0,0 —>
32. Далее копируем слои с нашим логотипом и текстом, располоижим их справа, предварительно уменьших их с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T).
p, blockquote 261,0,0,0,0 —>
Ниже текстового меню расположим счетчик (картинку можно взять из архива — файл counter.jpg) и чуть правее напишем наш копирайт.
p, blockquote 262,0,0,0,0 —>
p, blockquote 263,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 264,0,0,0,0 —>
p, blockquote 265,0,0,0,0 —>
На этом все, как сумел расскрыл вопрос — как сделать дизайн сайта в фотошопе.
p, blockquote 266,0,0,0,0 —>
p, blockquote 267,0,0,0,0 —>
p, blockquote 268,0,0,0,0 —>
(нажмите на картику для просмотра оригинала)
p, blockquote 269,0,0,0,0 —>
Если у вас есть вопросы, задавайте их в комментариях, с радостью на них отвечу.
p, blockquote 270,0,0,0,0 —>
p, blockquote 271,0,0,0,0 —>
p, blockquote 272,0,0,0,0 —> p, blockquote 273,0,0,0,1 —>
Давайте вместе изучать этот интересный и загадочный мир программы Adobe Photoshop.