Делаем сайт из .PSD файла

Делаем сайт из .PSD файла

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

Прежде, чем Вы просмотрите эти видеоуроки, я хочу немного рассказать о том, что Вы здесь увидите. Прежде чем делать сайт, используя psd файл, надо нарисовать в программе Photoshop psd макет будущего сайта. Здесь есть некоторые моменты, которые надо знать. Этот макет обязательно делается с применением слоёв. Каждый элемент обязательно делается на новом слое. Потом эти слои группируются в группы. Здесь обязательно надо сразу придать слоям стили и эффекты, что бы при вёрстке уже всё делать согласно этого шаблона. Поэтому, основная масса начинающих будет использовать бесплатные макеты, в которых уже есть все файлы. Но что делать, если у нас нет этих готовых файлов? В этих видеоуроках мы и постараемся сделать страничку, используя только изображение понравившейся странички. Что здесь будет, что главное. Главное, что здесь мы посмотрим, как сделать файл стилей и сделаем стили для всей странички. Все эти стили и кусочки кода можно будет использовать в своих работах. Например форма поиска. Можно просто скопировать код со страницы, взять стили из файла стилей, и применить у себя, немного изменив для себя. Так же можно взять и использовать любые блоки на странице, Вам не надо будет ломать голову, как сделать то, или это. Взяв код из страницы и применив стили из файла стилей, всё можно сделать очень быстро и просто. Я специально взял эту страницу. Там разнообразные блоки, формы, разметка. Например, я долго сам пытался, в своё время, сделать блок, в котором размещены два блока по вертикали. У меня долго ничего не получалось, сколько я на это потратил время и нервов. Здесь всё показано, есть уже готовая разметка и стили для подобных блоков, можно всё использовать. Использовать, или не использовать эти решения, решать Вам, но посмотрите уроки, может и пригодится…

Приятного Вам просмотра!

Смотрим видеоуроки:Видеоуроки сделаны с помощью программы Photoshop CS2

Подготовка к работе, предварительная разметка
В этом уроке мы начнём подготовку к работе. Мы сделаем предварительный psd-файл. Очень внимательно просмотрим нашу картинку. Перед началом работы нам необходимо решить, каким образом мы будем верстать страницу. Каким образом нам лучше порезать файл на картинки и составить представление, какие блоки будут на странице. Одним словом составим план наших действий по вёрстке страницы. Если это делать в процессе работы, то нам постоянно придётся переделывать всё заново. Итак, начнём… Создаём сайт в Dreamweaver CS3 и делаем каркас страницы
В этом уроке мы создадим сайт в программе Dreamweaver CS3, что бы иметь возможность полноценно работать в ней над нашей страницей. Мы создадим файлы html и CSS. И, наконец, начнём делать нашу страницу. Самое первое, мы сделаем каркас нашей страницы с помощью блоков <div>. Здесь главное правильно сделать вложение блоков, иначе нам не сверстать правильно всю страницу. В конце мы оформим наш первый блок шапки графическим файлом. Заканчиваем разметку страницы
В этом уроке мы визуально оформим цветовую гамму нашего будущего меню. Так же мы продолжим разметку нашей страницы. Нам очень важно сделать правильный каркас страницы, иначе наша вёрстка потом будет разваливаться. Мы до конца разметим страницу и сделаем каркас нашей страницы при помощи элементов <div>. В конце урока у нас будет готовый каркас страницы, готовый к наполнению содержимым. Делаем блоки в шапке страницы
В этом уроке мы уже будем заниматься содержимым нашей страницы. Мы установим в шапку сайта три блока, в которых у нас будет логотип, форма поиска по сайту и интернету, а так же Java скрипт вывода числа и времени. Мы сделаем для этих блоков стили и у нас уже будет начало нашей страницы. Начинать всегда трудно, но мы пойдём далее… Делаем горизонтальное меню
В прошлом уроке мы занимались шапкой страницы. У нас всё получилось и мы идём далее. В этом уроке мы установим горизонтальное меню в нашу страницу. Меню мы будем делать при помощи CSS, без применения скриптов. Конечно, мы сделаем стили для него. В результате работы над нашим меню, мы получим точную копию его, только всё переделаем под свою страницу. Вставляем первый блок в левую колонку
Вот мы и начинаем вставлять в страницу её содержимое. На этом уроке мы вставим в левую колонку первый блок. Нам очень важно соблюсти все отступы, как внутренние, так и внешние. Так же важно правильно сделать код нашего блока. От этого будет зависеть, будет ли наша страница похожа на оригинал. В результате наших манипуляций, мы получим вполне законченный блок, который будет не отличим от блока на рисунке. Вставляем блок фотогалереи
Продолжаем работу. Делаем второй блок в левой колонке. Это блок с фотогалереей. Мы попробуем сделать такой же блок. Вставим изображения, расположим их так, как они расположены в оригинале. На их место можно встроить скрипт вывода фотогалереи. Скриптов таких много, главное подобрать подходящий скрипт для себя, под свои нужды. Вставляем блоки в среднюю колонку
Переходим к средней колонке. Здесь нам немного полегче. Здесь два одинаковых блока. Нам достаточно сделать один, а потом мы вставим один блок под другим и наша колонка будет заполнена контентом. Правда здесь есть ещё один блок для «фанатов» валидности. Но здесь надо вставить лишь ссылки на валидатор. В архиве с видеоуроком они есть, поэтому, кому надо, можете их использовать. Вставляем блоки видеороликов в правую колонку
Приступаем к заполнению правой колонки. Здесь у нас есть несколько блоков, которые объединяет одно. Все они «завёрнуты» в одинаковую оболочку. Это позволит нам сделать один стиль в таблице стилей для всех блоков в правой колонке. Первым блоком в этой колонке будет блок видеороликов. Мы сделаем этот блок, установим картинки. Здесь, при желании, можно подключить скрипт показа видеороликов, или встроить плеер и показать видеоролики. Уроки по этому вопросу на сайте есть. Вставляем блок подписки на новости сайта
Продолжаем работу, и следующим нашим шагом будет установка блока подписки на новости сайта. Этот приём широко применяется в интернете, когда посетитель подписывается на новости Вашего сайта и потом, из рассылки, получает последние новости от Вас. Изюминкой данной формы является то, что посетитель, подписываясь, может выбрать категорию новостей, на которую он хочет подписаться. Эту форму можно использовать и отдельно от этого сайта. Скопировать код формы, скопировать стили к этой форме и всё вставить в свой проект. Единственное, что потребуется, сделать ссылку на обработчик этой формы. Вставляем блок новостей на блоге
Продолжаем работу, и следующим нашим шагом будет установка блока новостей нашего блога. Очень часто web-дизайнер ведёт ещё и свой блог, а не редко и несколько. Соответственно он хочет прорекламировать новости и новые посты на своих блогах. Что может быть лучше, чем разместить рекламу на своём сайте? Вот и мы сделаем такой блок, где можно разместить короткие выдержки из наших постов на блоге. Теперь и мы сможем в этот блок вставить скрипт вывода новостей, и прорекламировать свои посты. Вставляем блок опроса и голосования
Любой web-дизайнер хочет знать, как оценивают его работу посетители сайта. Для этого он устанавливает на сайте различные инструменты для общения с посетителями. Почтовые формы, гостевые книги, форумы. Но есть ещё инструменты для того, что бы узнать мнения своих посетителей. Вот например форма опроса. Этот приём используется часто. Различные опросы или голосования на сайте позволяют web-дизайнеру проанализировать, соответственно результатов, что не так, и что надо изменить. Мы с Вами и сделаем такую форму, останется только встроить скрипт. Оформляем наш Footer
В этом уроке мы будем заполнять наш footer. Действительно, здесь не просто простые копирайты и всё. Здесь ещё целых два блока с информацией. Особенно здесь интересно то, что мы увидим, как можно сделать и расположить три колонки в одном блоке. Такие куски кода очень могут пригодиться. Такие вещи надо копить, они всегда могут пригодиться. Устанавливаем Java-скрипт вывода новостей
Я специально оставил этот урок напоследок. Дело в том, что я должен был найти соответствующий скрипт. Я довольно долго его искал, нашёл несколько вариантов, пока не нашлось то, что было нужно. После этого я должен был сделать два изображения, которые нужны для правильной работы скрипта, те изображения, которые нужны нам, что бы всё подходило под оригинал. С родным скриптом идут другие. При установке у меня возникли проблемы, но я вместе с Вами впервые его устанавливал, поэтому так и получилось. Я не «гуру», поэтому и не стал переделывать урок или «причёсывать» его. Иногда приходится потратить время и нервы, что бы установить скрипт и показать его Вам в уроках. Но мы справились и можем насладиться результатом. Подводим итоги, последние замечания и советы
Вот такой сайт мы сделали. У нас всё получилось. Сайт очень похожий на оригинал. Самое ценное в нашей работе, то, что мы сделали сами разметку и файл стилей, соответственно которым у нас получилась страница, с которой мы работали все эти занятия. Я думаю, что для новичка эти уроки будут полезны тем, что он увидит весь процесс от вёрстки страницы, до её наполнения, не имея практически ничего, кроме фото страницы, в идеале .PSD-файл. Смог ли я помочь тем, кого интересовала эта информация, не знаю. Но мне, к сожалению, бог не дал способности дизайнера, я не могу нарисовать в Photoshop красивый дизайн. Поэтому я и прибег к такой форме показа. Всё что я делал, измерял, должно проводиться на основе psd-файла, но я использовал изображение, за неимением оного. Тем не менее, для меня это то же была непростая работа. Вместе с Вами я первый раз делал сайт не имея ничего, тем более, что надо повторить дизайн. Но нам всё удалось, поэтому мы получили некоторый опыт, мы получили новые коды и стили, которые можно применить и в других работах.