Подписка
Email
Fb
RSS
Twitter
Email

Шаблон PSD — основные элементы

PsdшаблонПриветствую Вас на DenWeb.Ru! Сегодня мы наконец-то начинаем верстать наш шаблон из PSD в html и css.

В начале пару слов об инструментах, которые нам понадобятся. Конечно же, не обойтись без текстового редактора. Я буду использовать Adobe Dreamweaver CS4. Так же, для работы с PSD шаблоном нам понадобится Adobe Photoshop и браузер, для просмотра результатов нашей работы.  Для проверки кроссбраузерности верстки необходимо несколько браузеров, или же можно воспользоваться различными сервисами и программами, о которых я писал в статье «Проверка сайта в браузерах».

Для начала достаточно, о других программах, сервисах и плагинах я расскажу далее, в процессе курса.

Для уроков я подобрал следующий PSD макет:

psd_макет

Здесь можно скачать PSD исходник.

При выборе макета я брал во внимание то, что после верстки планируется кодировать его в тему для WordPress, а поскольку WordPress — это блоговый движок, то я выбрал макет блога.

Сначала мы должны определить основные структурные элементы дизайна, и , исходя из этого, будем создавать блоки html-макета. Как я уже отмечал в предыдущих уроках — верстка у нас блочная. Следовательно делить макет нужно на блоки, а точнее прямоугольники. И каждый прямоугольник, который мы сейчас разметим на PSD макете, будет в конечном итоге блоком <div>.

Итак, выделяем следующие основные элементы:

psd_шаблон

Шапка (header), которая будет содержать в себе главное горизонтальное меню, форму поиска, ссылку на rss подписку, логотип, описание сайта и слайдер на javascript, в котором будут показываться обновления блога.

Основное содержимое (content). Здесь выводится основное содержимое сайта.

Панель навигации (SideBar) будет находиться внутри блока #content и содержать вертикальное меню категорий блога.

Футер или подвал (footer) состоит из двух элементов. Большого, в котором выводятся ссылки на другие сайты, ссылки на социальные сервисы и последние материалы сайта. И, наконец, самый нижний элемент футера — блок с навигацией и копирайтом.

Макет сайта у нас будет фиксированный, с постоянным значением ширины. Сайт выравнивается по центру экрана.

В следующий раз начнем резать наш PSD макет на графические элементы.

Вы можете оставить комментарий.

34 комментариев к записи “Шаблон PSD — основные элементы”

  1. denbrown:

    Спасибо за уроки, жду продолжения:)

  2. Андрей:

    а когда следующий урок??? да извини за такой вопрос. Случаем не собираетесь делать уроки Photoshop именно для web дизайна??? Не плохо бы было=)

  3. evjikshu:

    Уроки фотошопа лучше самому себе устраивать методом тыка-можно неплохо научиться.А по простому-в сети достаточно сайтов для изучения фотошопы и прочих полезностей. Например-демиарт. Ну и конечно-большое человеческое спасибо за уроки. Целый день сижу без вылазно. 

  4. Андрей:

    Нарезанный PSD хотелось бы увидеть.

  5. Виктор:

    Ден помоги!!! как убрать эту сетку?

  6. Виктор:

    Ден подскажи, я скачал PSD исходник. Запускаю его, он открывается скакими то линиями. Как их убрать?

  7. Виктор:

    спасибо разобрался

  8. Алексей:

    Не качается, вместо файла какой-то текстовый =)

    • Все нормально скачивается, проверил.

      • Алексей:

        Встроенным загрузчиком ни с оперы, ни с мазилы не качалось. С downloadmaster скачалось. Без него при клике на «Здесь» выдавало страницу какого-то кода.

        • посетитель:

          Если посмотреть в адресную строку браузера, то там будет что-то вроде этого:denweb.ru/............brilliante.psdТ.е. из-за настроек брузера файл psd не сохраняется на диск, а загружается в браузер как html страница. Нужно просто дождаться пока полностью загрузится, выбрать пункт «сохранить как...» и сохранить на диск как «веб-архив (единственный файл)». Затем у сохраненного файла заменить расширение (переименовать) на psd.

  9. denis:

    Где скачать твой psd?

  10. allemiko:

    Сайт хороший,да и уроки и вас ни хуже, наверное потом планируете создать платный инфопродукт?, у меня есть знания html,сss, но верстать не получается никак, фотошопом тоже начинаю нормально пользоваться, иногда даже показывать стыдно что я сверстал,но думаю что научусь,главное не сдаватьсяХороший сайт,информативный и дизайн приятный :))

  11. Никита:

    Ден где можно скачать adobe dreamweaver cs4?

  12. Константин:

    Обновите ссылку на скачку пожалуйста, а то она скоропостижно скончалась(((

  13. Димон:

    Огромное человеческое Спасибо!Знаю сколько трудов стоит написание инструкций/уроки. Удачи во всем! С Наступившим!Для себя нашел много интересного.error: Футер или подвал (footer) сосоит состоит из двух элементов. 

  14. ukrbass:

    Adobe Dreamweaver уроки ,есть в планах ? Спасибо за ответ !

  15. semen:

    Денис скажи пож какой фотошоп ты используешь и не мог бы ты переслать установочный файл на мой адрес semen51515@yandex.ru 

  16. Михаил:

    Денис, ты пишешь что WordPress — это блоговый движок, а на этом движке простой сайт можно тже сделать, или я чего то не понимаю?

  17. Руслан:

    Просто информирую: в мозиле (последняя или одна из последних версий) не открывается страница загрузки шаблона, выдаёт код. С хромом всё ок.

  18. Александр:

    Доброго времени суток!А чем отличается блоговый дижок от дижка неблогового?

  19. stek:

    а где скачать Adobe Dreamweaver CS4 и Adobe Photoshop . всё платное( может есть у вас сылки? или продолжать искать? подскажите какая у вас версия на этот год. 

  20. Евгений:

    Здравствуйте! Почему не качается макет сайта?ссылку проверить нужно.

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика