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

Уроки верстки — верстка из PSD

верстка из PSDПриветствую вас на DenWeb.Ru! Мы продолжаем уроки верстки сайта из PSD. Мы уже разобрались с тем, какие бывают макеты сайтов, а так же выбрали PSD шаблон.

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

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

Создаем в своем компьютере папку для темы (у меня будет — «test_theme»), в ней — папку «img», в которой и будут храниться все графические файлы.

Работать будем в программе AdobePhotoshop. Для большей наглядности этот урок я сделал в видео формате (видео в HD).

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

82 комментариев к записи “Уроки верстки — верстка из PSD”

  1. Андрей:

    отлично!!!!Ждем следующего урока

  2. Андрей:

    Когда следующий урок?

  3. Через какую прогу видео делали?

  4. Спасибо. Работа с графическими редакторами больная для меня тема. Был бы GIMP вместо Photoshop'а было бы совсем круто :)

  5.    Звук на видео слабоват. А можно в Camtasia Studio подобрать егоопытным путем ? Если можно, то вот повод для очередного поста.

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


  6. Simplex:

    Возникла проблема с псд макетом, почему то у меня он не открываеться корректно. Ошибка о отсутсвии каких т о шрифтов :(А в общем очень хороший курс. Вам бы еще подтянуть английское произношение :)

    • Просто в системе не установлены по умолчанию применяемые в данном шаблоне шрифты. Это не страшно. Если очень нужно, то всегда можно любой шрифт добавить.

      На счет английского — согласен)

  7. Kostya:

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

  8. Версия CS5. Плагинов нет дополнительных, что именно не отображается?

  9. Simplex:

    На cs6 не смог корректно обьеденить обьекиы которые вместе с полем поиска идут. Вместо merge layers есть только пункт merge shapes. и после их обьединения как то не корретно копируеться в новый файл выделение :(

  10. mirinda:

    Спасибо большое за Ваши уроки!! все подробно изложено

  11. Жду урока с версткой! спасибо за отличный урок!

  12. Денис:

    как сделать, чтобы все элементы шаблона (картинки, шрифты и тд), как у Вас, были на отдельном слое?

  13. А можно ссылочку на скачивание этого видео? Грузит очень долго :- (

  14. Fati:

    Ден, я не знаю, что именно нужно сделать , чтобы подписаться на уроки.Нажала на ссылку RSS. а что дальше?

    • Далее выбираете и кликаете на Ваш ридер, например GoogleReader. Можно разные плагины для браузера использовать, туда просто ссылку скопировать нужно. В Опере, например, уже встроенный есть. Нужно кликнуть в адресной строке справа по иконке rss.

  15. Fati:

    кто-нибудь объясните. Дену, наверное, не до этого.

  16. salma:

    Спасибо что вы есть! И безвозмездно помогаете нам новичкам! Удачи вам во всем. Очень внятно все объясняете, отличные уроки.

  17. prikol:

    У меня тож cs5 но при наведении на нужный слой он не выделяется инструментом перемещение почему?

  18. PakisTaN:

    Den, спасибо огромное за уроки, даже не думал наткнуться на такой качественный бесплатный курс. И вопрос один.Можешь плиз объяснить зачем нужно стрелки преобразовывать в СмартОбъекты?

  19. Сэр_Йожик:

    Здравствуйте! Не могу скопировать слои для кнопок. Например, выделяю слой «facebook», нажимаю Ctrl+C и выходит сообщение: Команда «Скопировать» не может быть выполнена: выделенная  область пуста.

  20. Сэр_Йожик:

    Как не с тем? Других слоев с такими названиями там нет.

  21. Павел:

    Спасибо за видео.Присоединюсь к prikolу, у меня тоже cs5 но при наведении на нужный слой он не выделяется инструментом перемещение...

    • Jaguar:

      Чтобы инстремент перемещения выделял слой, постась галку Auto-select на панеле свойств инстремента, и выбери рядом из меню Layer, тогда будет выделять слои, если выберешь Group тогда будут выделяться группы слоев. Смотри s019.radikal.ru/i638/1204/d4/ee878437bef8.jpg

  22. Jaguar:

    Простите за  орфографические ошибки :)

  23. Jaguar:

    Благодарю за понятные и доступные уроки, мало такого структурированного материала в сети. Удачного вам развития и успехов в этом деле!

  24. Добрый день, Денис!Когда будет следующий урок ? С уважением Давид!

  25. Где скачать Adobe Photoshop CS5? Киньте ссылку пожалуйста.

  26. Ирина:

    Большое спасибо за такие классные уроки! Маленький совет: когда создаете новый документ в Фотошопе, он предлагает в числе прочего выбрать цвет фона (белый, цвет фона или прозрачный). Если выбрать прозрачный, потом не придется отключать фоновый слой — экономия времени.Желаю всяческих успехов!

  27. Павел:

    А можно узнать, в какой версии фотошопа урок?

  28. Павел:

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

  29. Руслан:

    Здравствуйте, а какую экранную линейку вы используете если не секрет? 

  30. Елена:

    не могу найти где скачать PSD шаблон, ткните носом, пожалуйста))А за уроки огроменное спасибо! Спасибо за такой труд! Все очень доступно и интересно рассказываете! Успехов вам!

  31. Елена:

    таки нашла ссылку на шаблон, но при нажатии на нее у меня открывается страница с длиннющим  непонятным кодом

  32. Kamil:

    когда пытаюсь объединить два объекта — вместо Объединить слои — Объединить фигуры написано ПОМОГИТЕ

  33. Виктор:

    Я впервые в фотошоре и смотрите что у меня выходит...

    http://clip2net.com/clip/m0/1348380028-clip-191kb.jpg?nocache=1, помогите вылечить пожалуйста!!!!!! 

  34. Ростислав:

    Подскажите пожалуйста, выделил нужный слой, нажал Ctrl+c потом Ctrl+n и там буфер обмена не активен, не могу вставить то, что копировал. В чем может быть причина? Из других приложений картинки отлично копируются и в фотошоп вставляются.

  35. Павел:

    Как включить именно пиксельную сетку?У меня в фотошоп CS5 ее нет, только обычная сетка

  36. Алексей:

    есть сочетание клавиш Сtrl+j вместо Ctrl+c Сtrl+n Ctrl+v 

  37. BigYu:

    исправьте:"папкку" на "папку " «понадобятся на для верстки» на «понадобятся нам для верстки»

  38. Gunther817:

    у меня есть шаблон в PSD формате сколько будет стоить сделать из него шаблон для сайта Joomla

    • Все зависит от конкретного шаблона и профессионализма исполнителя — разброс цен может быть большой.

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

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

  40. А макет можно разделить в iilustratore ?

  41. Никита:

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

  42. Саша:

    Очень понравился ваш урок, спасибо.

  43. Айваз:

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

  44. Ольга:

    Здравствуйте. А можно добавить к уроку архив вырезанных рисунков с psd-шаблона?

  45. Анастасия:

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

  46. Здравствуйте.У меня есть купленный psd шаблон со стилями, скажите, сколько будет стоить чтобы вы сделали css стили и html верстку?Я попытался но у меня не совсем получаются стили. Помогите плиз.

  47. Анатолий:

    Именно то, что искал!СПАСИБО, Ден, за такие понятные уроки. Тем более, что делаете это безвозмездно. Успехов вам!

  48. Олег:

    Добрый день. Подскажите пожалуйста, выделил нужный слой, нажал Ctrl+c потом Ctrl+n и

    там буфер обмена не активен, не могу вставить то, что копировал. В чем

    может быть причина? Перепробовал несколько версий фотошопа... не могу понять что делать и гугл не помогает...Денис Вы моя последняя надежда!

  49. Влад:

    Спасибо автору! Долго искал понятные уроки. Жаль что Google не поставил на первое место ваш сайт по запросу «уроки PSD в HTML»

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

Spam Protection by WP-SpamFree

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