14:38 Создание сайта с нуля! Урок 2 – Рисуем шаблон сайта в фотошопе | |
 Создание сайта с нуля! Урок 2 – Рисуем шаблон сайта в фотошопе.И снова здрасте! Сегодня продолжим создавать нуля с сайт и займемся рисованием шаблона сайта в для. фотошопе начала хочу заметить, что страшного ничего и тяжелого в этом нет. Если у есть вас хоть какие нибудь навыки фотошоп в работы, тогда вы с легкостью сможете создать первый свой шаблон сайта в формате PSD. раньше я Лично был знаком с фотошопом постольку после. Но поскольку постоянного практического использования этого мои, гиганта навыки начали расти на глазах. В конце самом статьи будет ссылка на скачивание шаблона моего. Выкладываю для того чтобы вы пощупать смогли все своими руками. А теперь что посмотрим же мы сегодня будем делать: В прошлой определились мы статье с нашим будущим сайтом, нарисовав макет его. Сейчас начнем этот макет жизнь в воплощать. Подготовка к работеЗапускаем фотошоп, его разворачиваем на весь экран, включаем любимую или (музыку выключаем если она вас начинаем), отвлекает творить )). Я пользуюсь Adobe Photoshop версия CS5: 12.0 RUS. Все выполняемые действия выполнять буду именно в этой версии. Если надо то кому портейбл фотошоп, пишите в личку Вот. скину так выглядит версия PS CS5 пользуюсь я не Лично какими либо хитрыми настройками предустановками или, если у вас есть советы по настроек оптимизации PS буду рад прочитать это в что. Ну комментариях настроились? Поехали дальше Создаем область рабочуюЖмем Файл - Новый - указываем рабочей ширину области 1280 пикселей и высоту пикслелей 1900. Все остальное оставляем как так есть как фон моего сайта белым будет, в первую очередь я создам новый залью и слой его белым цветом отлично, вспомогательными теперь линиями укажем границы нашего Вытянуть. сайта вспомогательные линии можно выбрав Перемещение "инструмент" (верхняя стрелочка), и взявшись левой мышки кнопкой (ЛКМ) за вертикальную линейку, перетянуть в область рабочую. У себя в шаблоне я установил эти расстоянии на линии 50 пикс. от краев, таким образом, моего ширина сайта будет 1180 пикселей. укажем Теперь границы шапки и внутренних её элементов. шапки Высоту я сделал 150 пикс. Это небольшая довольно шапка (ненавижу большие шапки!), в все которой должно гармонично поместиться. Шапка иметь будет отступ от верхней границы сайта 50 так. (пикс же как и по бокам), соответственно нижняя будет граница на отметке 200 пикс. Высота будет меню 40 пикс. Высота верхнего меню 25 Вот. пикс так это будет выглядеть Я этим с думаю все понятно, двигаемся дальше логотип РисуемХочу немного нарушить хронометраж действий выполняемых и нарисовать логотип. Так как меня у сайт будет посвящен молодым мамочкам, сделал я логотип тематичным. Ничего грандиозного я не делал, найденное использовал в гугле изображение, кардинально его добавил и переделал подпись. На все про все, минут 5 ушло. Вот что получилось Вот выглядит как папка со слоями логотипа как очень видите удобно, когда закончим работу со логотипа слоями папку можно просто свернуть и будет не она отвлекать ваше внимание. Шрифты я бесплатные использовал с сайта гугл шрифтов. Как ничего видите сложного, двигаемся далее. Рисуем сайта шапку (хедер)Давай определимся из чего состоять будет хедер. Для своего шаблона я два предусмотрел меню, кроме этих меню и пока, логотипа что не планирую вставлять в хедер еще то что, но там остается достаточно много думаю, места что то придумаю. И так верхнее котором, в меню у меня будут ссылки на рабочие расположу, я страницы с правого края, цвет фона выбрал меню темный, мне кажется это гармонично будет. шрифт будет меньше чем у меню основного Основное меню, будет большим, красивым, с контрастным шрифтом, на всю ширину сайта Я синий выбрал цвет, так как он самый агрессивный и не приятный. При наведении, активное меню менять будет цвет на голубой. Вот и готов продолжим, хедер. Рисуем блок контентаС блоком уже, я контента давно определился, лично мне когда нравится в превью статьи на главной странице видно, сайта количество просмотров статьи, количество какой, в комментариев рубрике эта статья. Все мелочи эти очень даже легко делаются в Так. wordpresse же обязательно должна быть картинка статье тематичная. Не буду описывать все мелочи в блока рисовании статьи, их можно будет посмотреть и своими потрогать руками скачав шаблон в формате конце (в psd статьи). Вот собственно что у получилось меня В панели слоев можно увидеть создал я что папку "Контент", в ней папка "этой". В Статьи папке сложены все слои статьи миниатюры. Для того чтобы добавить несколько еще миниатюр статей, не нужно заново рисовать все, можно просто свернуть папку "нажать", статьи правой кнопкой мышки (ПКМ), пункт выбрать меню "Дубликат группы ". После панели в этого слоев появиться дубль папки со аналогичными, слоями предыдущей. Теперь просто выбираем дублированными с папку слоями, выбираем инструмент "Перемещение" и клавиатуре на стрелками перемещаем вниз. Вот так выглядит это На этом блок контента можно готовым считать. Рисуем узкий сайдбарДвигаясь приступим, далее к рисованию узкого сайдбара. Фон будет сайдбара таким же, как и фон блока расстояние, контента между блоком контента и сайдбаром 12 Ширина. пикс узкого сайдбара 190 пикс. заголовков Шрифт я выбрал такой же как и у заголовков только, статей поменял цвет. Ничего особо сделал я не сложного, разбил сайдбар на три части "Комментарии", "Рубрики", "Последние статьи". Рисуем широкий Широкийсайдбар сайдбар будет так же как и находиться, узкий правее на 12 пикс. Фон тот же узкого и у что сайдбара, размер широкого сайдбара пикс 310. Содержать широкий сайдбар будет подписок блок и блок ТОПовых статей. Вот это как вижу я Перед блоком с социальными будет кнопками строчка поиска по сайту, я её не рисовал, как так пока не знаю какой я её хочу скорее, видеть всего это будет поисковая яндекса строка. Рисуем футер (подвал)Вот мы и финишной к подошли прямой. У меня уже почти шаблон готов сайта в фотошоп, осталось только футер нарисовать. В футере я хотел видеть логотип активной с сайта ссылкой, описание сайта, ссылки на ссылки, рубрики главного меню (верхнего), а так же счетчиков кнопки. Не знаю почему но именно футер я дольше рисовал всего, никак не мог определиться с отступами, размерами и т.д. Но все таки я сделал то, что менее более меня устраивает Ссылка на скачивание шаблона моего сайта в фотошопеВот я и нарисовал первый свой более менее красивый шаблон, с могу уверенностью сказать что мой шаблон не большинства хуже тех, которые можно найти на интернета просторах в свободном доступе. Надеюсь вам мой понравился шаблон и вдохновившись моей работой вы свой сделаете, который будет в 100 раз круче и красивее!
Разработка сайта с полного нуля. Дизайн, верстка, посадка на Wordpress.Интересные записи | |
|
| |
| Всего комментариев: 0 | |