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. Это удобно, безопасно и быстро. О том, как открыть счет в этой системе, я расскажу в двух видеоуроках, которые записал специально для вас.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 12 Января 2010 18:32
    qunser
    Спасибо Евгений !!!
  • 13 Января 2010 12:36
    La5erdance
    Круто мужики)
  • 14 Января 2010 23:54
    KuPuJl
    Я не могу скачать... Повреждены файлы.... Проверьте пожалуйста всё ли нормально
  • 21 Января 2010 09:26
    marmelad
    Отличные уроки. Долго искал что-то подобное в инете, наконец-то нашел! Спасибо!
  • 21 Января 2010 15:07
    Viorel
    Отличные уроки Спасибо !!!
  • 4 Февраля 2010 01:45
    ash_wise
    Не работает ссылка на скачивание для зарегистрированных пользователей...
  • 4 Февраля 2010 10:25
    Сергей_Патин
    А там ничего и нет. Не обращайте на нее внимания.
  • 5 Февраля 2010 09:56
    weolfas
    классные уроки, спасибо огромадное :)
  • 6 Февраля 2010 11:12
    ash_wise
    Очень плохо, что "там ничего и нет", так как хотелось бы скачать все уроки одним файлом, например архив...)))
  • 9 Февраля 2010 12:51
    ash_wise
    Спасибо!!! Всё скачал по отдельности, уроки супер, многое для себя открыл...)))
  • 9 Февраля 2010 13:52
    MetalPunk
    Огромное СПАСИБО)))
  • 17 Февраля 2010 14:26
    sorocopytochka
    Большое спасибо
  • 18 Февраля 2010 20:46
    moHAX
    Евгений, уроки супер, только пропиши ссылку на весь архив
  • 25 Февраля 2010 02:04
    Алексей
    Спасибо! Я очень рад, что мне подсказали ваш ресурс!!!
  • 1 Марта 2010 17:03
    Влад
    Евгений отличные уроки и твой сайт мне понравился а особенно понравился ваш сайт с Зинаидой Лукьяновой фотошоп мастер СПОСИБО ОГРОМНОЕ!!!!!!!!!!!!!!!!
  • 4 Марта 2010 22:05
    Slavoz
    Почему то 1 урок качаеться меньше чем на половину! Когда запускаю урок смотрю немного, а потом видео обрубается! Что делать???
  • 5 Марта 2010 17:08
    ledyN
    у меня тоже проблема с закачкой 1 урока, наполовину скачивается, а потом выдаёт ошибку, подскажите в чём дело?
  • 8 Марта 2010 10:15
    cyxou
    Огромное спасибо за вашу работу. Прекрасные уроки.
  • 16 Марта 2010 23:06
    Velus
    Мой товарищ дал ссылку на ваш сайт, я приятно удивлён, сколько доступной и ценной информации. Огромное вам человеческое спасибо Евгений.
  • 18 Марта 2010 16:07
    leon
    Большое вам, человеческое спасибо. Для начинающих, это не мало важная информация.
  • 20 Марта 2010 18:19
    serega
    Спс за урок очень полезная иформация пойду качать вторую часть =)
  • 21 Марта 2010 19:39
    Alex
    Большое спасибо! Очень много ценной информации!
  • 28 Марта 2010 16:06
    Влад
    Евгений Скажите Название Программы Через Которую Вы Редактируете Html Файлы Пожалуйста ОЧЕНЬ НАДО!!!!!!!
  • 28 Марта 2010 18:33
    Влад
    Ктонибудь Скажите см. ниже
  • 31 Марта 2010 20:24
    antone
    Спасибо за уроки - очень понравились! Вот бы побольше такого материалла! а еще наткнулся на сайт (не примите за рекламу!!) - shablon.pp.ua - там много шаблонов в PSD формате, долго такой искал, т.к. это возможность попрактиковатся в верстке сайта! Спасибо вам Евгений за перевод уроков и начитку!
  • 3 Апреля 2010 18:26
    Clerchic
    Спасибо,Спасибо за ваш труд!!!
  • 5 Апреля 2010 23:24
    Alex
    Евгений, у Вас действительно есть педагогический талант. Знаком с Вашими уроками по PHP+mysql. Там действительно есть все, что нада новичкам для создания сайта. Я хоть и не новичок в этом деле, но иногда просматриваю некоторые материалы. Спасибо!!!! Вам, Вы делаете доброе дело.
  • 15 Апреля 2010 10:48
    huligan
    Побльше бы таких людей как Евгений!!!!спасибо!!
  • 17 Апреля 2010 10:49
    PJlAYBOY
    Спасибо огромное за этот замечательный урок вся понятно и доступно объясняете
  • 22 Апреля 2010 09:37
    sad
    Интересные уроки, только уж очень разжеванно. Щас начну качать вторую часть. Эта, я думаю, будет еще интереснее. Если быть точнее, именно эта часть меня и интересует больше всего. Но, во всех случаях, спасибо, Жень, за твой труд!
  • 25 Апреля 2010 03:18
    Taras
    Спасибо Жека! Твое имя-это знак качества! Я у тебя ничего не купил, но за то кликаю по рекламе 2-3 раза в день(когда захожу на твой сайт). Да благославит Господь плод, дел рук твоих! Удачи!
  • 3 Мая 2010 19:00
    HardCore
    Нет слов передать благодарность и уважение за проделанную работу и помощь начинающим. От души спасибо, Евгений. Успехов в дальнейшем...
  • 6 Мая 2010 16:39
    StilL
    Спасибо Вам Евгений за ваш труд!!! C уважением Андрей
  • 13 Мая 2010 17:14
    Алексей
    Евгений-один из немногих людей, который Честным и упорным трудом зарабатывает в интернет-бизнесе. При этом делает это профессионально и деликатно. К нему проникаешься доверием и восторгом, которые дороже любых материальных ценностей. Спасибо ВАМ - ЕВГЕНИЙ!
  • 13 Мая 2010 22:45
    waspire
    Давно сюда не заходил, но увидив этот урок, понял что зря...Спасибо!
  • 7 Июня 2010 20:59
    Umnik
    Классс...
  • 7 Июня 2010 23:44
    Владимир
    Нормально представлено, даже без затемнения откуда. Куплю ка я его диск "Все технические ....
  • 25 Июня 2010 20:23
    Sergei
    Почему-то не скачивается урок целиком
  • 25 Июня 2010 22:47
    Сергей_Патин
    Sergei, целиковой ссылки нет. Нужно скачивать по частям.
  • 26 Июня 2010 17:11
    Sergei
    Спасибо что я уже и сделал.
  • 6 Июля 2010 10:56
    ORIENT
    Оч интересно, качаю...
  • 10 Июля 2010 06:48
    Баходир
    От души спасибо вам Евгений за ваш труд!!! Удачи...
  • 14 Июля 2010 19:55
    Whiskey
    До настоящего времени не встречал в Рунете подобных уроков. Все профессионально и понятно! Спасибо!
  • 22 Июля 2010 19:54
    MrDoc
    Буду постигать эту хитрую науку,Спасибо за уроки!
  • 7 Сентября 2010 10:12
    Stas
    В IE 6 сайт отображается криво :((
  • 14 Сентября 2010 08:33
    вадим
    Спасибо Жень ! « Автор: Влад (2010-03-28 18:33:10) Ктонибудь Скажите см. ниже » Блокнот, dreamweaver и т.п. (каждый пользует то, что нравится)
  • 16 Сентября 2010 19:55
    Алик
    какая то фигня происходит... пытаюсь закачать первую часть, а в ответ тишина. мож заклинание какое знать надо..?.
  • 4 Октября 2010 17:46
    steletxl
    не качает 1 архивом, нажимаю скачать а он делает _blank этой станицы
  • 4 Октября 2010 17:46
    steletxl
    ясен х.. я не растерялся и скачал всё по отдельности
  • 18 Октября 2010 13:39
    hapchick
    Здравствуйте Евгений. не могу скачать уроки, качаются не полностью "поврежден архив" выдат что такое кто скажет??
  • 18 Октября 2010 13:53
    hapchick
    по отдельности не качает почемуу???
  • 2 Декабря 2010 23:00
    Black_Stalker
    Отличный видео курс, но почему нету инструкции к 1 части, хотя на видео вы постоянно с ней работаете :0(
  • 8 Декабря 2010 22:30
    TomahawK
    Евгений! Большое спасибо!)
  • 14 Декабря 2010 00:54
    Fresh
    Большое спасибо,давно искал урок в видео формате по вёрстке и тут случайно наткнулся,сайт великолепный)))))
  • 7 Февраля 2011 13:24
    slav541
    Уроки №1,2,6,8,9,10,11 не открываются, полечите пожалуйста.
    • 7 Февраля 2011 15:12
      Сергей Патин
      slav541, скачал указанные уроки - открывается прекрасно. Возможно, вы не докачали файлы.
      • 7 Февраля 2011 15:34
        slav541
        Нет файлы скачаны полностью, попробую еще раз, спасибо за внимание и ваш труд.
  • 27 Февраля 2011 22:44
    ILDAR06
    Сожалею, но рабочие архивы только 1 и 6 с 7 уроками. Все остальные скачиваются, но при открытии с неожиданным концом архива...
  • 28 Мая 2011 12:48
    veher61
    Всем Доброго Дня! Прежде всего, большое спасибо Евгению за его уроки. Я раньше уже пользовался подобным уроком Евгения, но там все делалось в программах Macromedia Dreamweaver различных версий.
    Это прекрасный курс: небольшой но довольно объемный и понятный (начиная NTML кода, до загрузки но сервер). Я потерял его (обвал системы), подскажите где его можно скачать?
    С уважением.
    Александр.
    
  • 9 Июня 2011 02:50
    mr_Greend
    Скачал все архивы по отдельности - все архивы рабочие. За курс огромное спасибо Вам, Евгений!
  • 4 Июля 2011 11:38
    pavlik111188
    Не скачиваются!
  • 14 Июля 2011 15:35
    Dahaka155
    Почему-то не начинает закачку видео((
  • 3 Августа 2011 14:28
    bos_off
    Eta sho sho ia iskal!! ;)
  • 4 Ноября 2011 20:20
    sashamusa
    Уроки отличные, мне понравились.
  • 2 Декабря 2011 02:27
    stanislav84
    Евгений! Большое спасибо!!!
  • 23 Марта 2012 18:29
    Vito Corleone
    Большое спасибо брат ЕВГЕНИЙ! Давно хотел научиться ! Спасибо еще раз!
  • 23 Апреля 2012 02:00
    kaflin
    budem ushitsa bolshoe spasibo vam Evgenii..vi-Genii
  • 9 Июня 2012 13:22
    Baffalo
    Спасибо большое за уроки то что я искал.
  • 19 Июля 2012 01:38
    Troyan4eg
    Евгений Попов спасибо огромное ! Именно то что я искал)
  • 3 Сентября 2012 23:30
    shevok
    Не сайт у тебя, Женька, - а просто БОМБА! Я новичок в сайтостроении, и когда скачивал 4 твоих бесплатных курса даже не имел представления что такое HTML, CSS и т.д. Просмотрел, попрактиковался и я понял насколько это интересное занятие. Я понимаю, что это только начало а на сайте сколько всего полезного и интересного. Скачал эти 11 уроков и сразу же приступимс к изучению.
  • 11 Сентября 2012 00:56
    shevok
    Что я не правильно делаю? В 6-том уроке, создав слой "image" после осуществления clipping mask исчезает изображение.
  • 16 Сентября 2012 03:32
    shevok
    Все получилось во всем разобрался. Спасибо! Отличный урок! Там что-то говорилось за следующую часть? Кстати, такое ощущение, что кроме меня сюда никто и не заходит
    • 21 Января 2013 09:38
      tema63
      тоже интересует вторая часть, касаемая верстки, можно ссылочку?
      • 29 Января 2013 21:40
        AlexWhite22
        Тоже ищу)))
        • 1 Февраля 2013 18:39
          azikman
          Спасибо за уроки! Люди пользуются уже 3 года, а я только начал!
        • 13 Июня 2013 19:16
          mihrytka
          http://ruseller.com/adds.php?rub_id=12&id=1674
  • 22 Мая 2013 08:28
    elenavictory
    Оболдеть! Надо же, как подробно! Евгений! Сколько в вас терпения! Я вами восхищаюсь! Первую часть уроков сделала. Перехожу ко второй. ОЧЕНЬ надеюсь, что вместе с вами получится так же легко и классно!:) Желаю вам успехов!
  • 13 Июня 2013 02:24
    mihrytka
    Спасибо большое, мне очень понравился этот урок. А можно поинтересоваться его продолжением, то есть вёрсткой. Я к сожалению не нашел продолжения тут.
  • 3 Сентября 2013 10:14
    dybrovka
    Большое спасибо за урок создание сайта в фотошоп. Многое для себя открыл нового. Даже в моем возрасте это очень интересно и полезно знать.Еще раз спасибо.
  • 9 Июня 2015 12:59
    rutter
    Как сделать что бы при создании файла в фотошопе было как у вас окно которое можно закрыть и тогда и файл закроется у меня его нет и размер соответственно я менять не могу ?
  • 12 Июня 2015 10:48
    rutter
    если я пишу пиксели во втором уроке в формах поиска или быстрой панели пишет не правильный диапазон как это исправить ?
  • 10 Ноября 2015 16:41
    vova55555182
    Спасибо))
  • 5 Марта 2016 17:32
    ENGINEL
    Спасибо, но в 8 архиве седьмой урок...
  • 9 Ноября 2016 18:39
    Эдвард Уилсон
    Я заработал первые деньги благодаря этому курсу https://srs.myrusakov.ru/fl?ref=mygabrielyan
^ Наверх ^