Рисуем шаблон iLemon. Д 2. Шапка сайта

Ну что же - начинается самое интересное! wink Теперь будет только практика!

И сегодня мы с вами будем плотно работать над шапкой сайта.

Если вы попали на эту страницу случайно, подпишитесь здесь, и вы сможете пройти весь 5-тидневный тренинг по рисованию дизайна сайта своими руками:

пройти тренинг бесплатно

Урок 1. Менюшки

Урок 2. Форма поиска

Урок 3. Название и лого

Урок 4. Социальный блок

Картинки для работы:

Социальные кнопки

Социальные кнопки

Социальные кнопки

Логотип для сайта

Друзья, если Вам что-то непонятно, есть какие-нибудь пожелания, хотите задать вопрос или просто поблагодарить - пишите прямо в комментариях - ответим всем smile
Комментариев: 64 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 64
  •  Серёга | 26 февраля 2013 в 13:26:40

    Не забывайте оставлять комментарии! smile

    Тогда я буду знать, что двигаюсь в правильном направлении!

  •  marina | 26 февраля 2013 в 13:28:31

    Ура! Ждала сегодня с нетерпением "письма счастья" с уроками!

  •  Галина | 26 февраля 2013 в 13:29:50

    Сергей,Здравствуйте.Ну,что делать?Не открывается ни одно видео в письме.А ссылки нет, чтобы скопировать и посмотреть.

  •  Анна | 26 февраля 2013 в 14:34:15

    Сергей! Большое спасибо за уроки,пока все получается на удивление хорошо!

    С нетерпением жду следующего письма !

  •  Серёга | 26 февраля 2013 в 14:52:24

    Спасибо большое за ваши комментарии! Оставляйте еще! smile

    Сергей,Здравствуйте.Ну,что делать?Не открывается ни одно видео в письме.А ссылки нет, чтобы скопировать и посмотреть.

    Галина, установите Flash плеер:

    http://get.adobe.com/ru/flashplayer/

  •  Сергей | 26 февраля 2013 в 15:09:31

    Сергей, жду новое видео как всегда smile

  •  Александр | 26 февраля 2013 в 15:43:39

    Сергей, огромное вам спасибо! Я теперь понял как отключать сетку и включать. Я рисую в фотощопе уже 1,6 лет. ОГРОМНОЕ СПАСИБО! Теперь получаются макеты, и еще раз спасибо =)

  •  Серёга | 26 февраля 2013 в 15:44:23

    Пожалуйста ребята smile

  •  Станислав | 26 февраля 2013 в 16:09:25

    Добрый день Сергей!

    Объясняешь все очень доходчиво, только если можно, чуть по-медленнее.

    Может поставить фон на сайт в самом конце, т.к. он немного бликует сетку.

    Спасибо, Станислав.

  •  Татьяна | 26 февраля 2013 в 16:12:49

    Сергей, отличные уроки! Одно удовольствие учиться!

  •  ark6223 | 26 февраля 2013 в 16:55:14

    Привет, Кольт!. Спасибо.

  •  Серёга | 26 февраля 2013 в 18:16:38
    Может поставить фон на сайт в самом конце, т.к. он немного бликует сетку.

    Так убери фон Станислав - и делай smile

    Всем остальным - ПОЖАЛУЙСТА grin

  •  Ирина | 26 февраля 2013 в 21:27:47

    Серёжа, у меня не получается ввести текст, что делаю не так

  •  Сергей | 26 февраля 2013 в 21:28:04

    Ура я пришел домой и теперь могу заняться уроками. Приступаю.

  •  Серж | 26 февраля 2013 в 21:43:00

    Серёга как текст писать? Нажимаю на буквы пишутся прямые черточки.

  •  Гузель | 26 февраля 2013 в 22:31:55

    Спасибо большое все понятно и просто.

  •  галина | 26 февраля 2013 в 23:40:19

    Серёга всё получилось,но где-то сбилась на размерах шрифта.У меня вместо 16пикс. идеально-11.Понимаю,что это непринципиально,но непонятно почему?Размеры исходного док-та не сбились,т.к. делала все уроки не отрываясь сегодня.Где косяк? Спасибо.УДАЧИ!

  •  Петр | 27 февраля 2013 в 12:04:23

    Все классно, но тупо не получается перемещать элементы по отдельности, двигается весь слой, никак не догнать ) А мастеру большое спасибо !!!

  •  Серёга | 27 февраля 2013 в 13:18:38
    Серёжа, у меня не получается ввести текст, что делаю не так

    Больше конкретики - что именно происходит?

    Серёга как текст писать? Нажимаю на буквы пишутся прямые черточки.

    Инструмент текст выбирай, как я в видео. Возможно ты выбрал какой-нибудь шрифт, в котором только черточки.

    Серёга всё получилось,но где-то сбилась на размерах шрифта.У меня вместо 16пикс. идеально-11.Понимаю,что это непринципиально,но непонятно почему?Размеры исходного док-та не сбились,т.к. делала все уроки не отрываясь сегодня.Где косяк?

    либо у тебя шрифт измеряется в пунктах, либо ты поставила увеличение шрифта - там по умолчанию в Символе - 100%, может ты больше поставила?

    Все классно, но тупо не получается перемещать элементы по отдельности, двигается весь слой, никак не догнать )

    Ну правильно, выбранный слой и должен двигаться. Или у тебя несколько слоев сразу двигается? Здесь либо ты эти слои связал, либо выбрал сразу несколько, либо у тебя выбрана группа - т.е. папка в которой находится несколько слоев.

    Всем спасибо за комменты! smile

  •  Михаил | 27 февраля 2013 в 18:09:53

    Опять сегодня рассылка не пришла!:( Дайте ссылочку на уроки!

  •  Елена | 27 февраля 2013 в 19:30:41

    Михаил, здесь ссылка на третий день тренинга: http://master-css.com/page/den-3-content

    А вы проверяли папку спам в своем ящике? Иногда потерявшиеся письма обнаруживаются там...

  •  Михаил | 27 февраля 2013 в 19:46:33
    А вы проверяли папку спам в своем ящике?

    Ну разумеется, Елена, и вчера и сегодня! Подевалась куда-то рассылка. Спасибо за ссылочку!

  •  Сергей | 27 февраля 2013 в 20:59:06

    Спасибо, Серега!

    Четко и ясно!

  •  Серёга | 28 февраля 2013 в 12:07:57

    Всем пожалуйста. Миша отпиши на почту - на какой ящик ты регестрировался на тренинг. Проверю тебя.

  •  Сергей | 28 февраля 2013 в 12:08:36

    Спасибо за возможность попрактиковаться в дизайне сайтов. Узнал очень много полезного для себя.

  •  Михаил | 28 февраля 2013 в 17:48:38

    Фу-ты, тупанул чего-то. Серж, удали комент, плизsmile.

  •  Серёга | 1 марта 2013 в 17:24:44

    Тупанул в плане? Решил проблему сам? Или не туда мыло отправил? smile

  •  Михаил | 1 марта 2013 в 18:19:54

    Не туда мыло запихалsmile, уроки-то я нашел на ютубе, а вот на странички, новые, так и не попал.

  •  Серёга | 1 марта 2013 в 18:21:02

    отпиши мне на почту - я скину тебе ссылки на все дни

  •  Михаил | 1 марта 2013 в 18:42:22

    ОК!

  •  Татьяна | 1 марта 2013 в 19:29:26

    Уроки классные.Очень нужные. Жаль, я слаба в фотошопе. Сейчас начинаю с азов, но уроки сохраняю и буду использовать. Очень благодарна.

  •  Серёга | 1 марта 2013 в 20:43:55

    Они и рассчитаны на новичков. Татьяна - уверен ты их сможешь пройти! smile

  •  Аноним | 2 марта 2013 в 05:55:17

    Серж vsё SUPER! Продолжайте в том же духе! У вас приятно учиться!

  •  Alex | 2 марта 2013 в 05:57:03

    О,зарегался.

    Серж vsё SUPER! Продолжайте в том же духе! У вас приятно учиться!!

  •  Ольга | 2 марта 2013 в 09:13:07

    Спасибо за уроки. Я первый раз открыла фотошоп. Всё понятно, но не всё получается. И очень медленно. Все дошли до пятого дня, а я ещё на втором.Цвет у меня получился красный вместо жёлтого.

  •  Серёга | 2 марта 2013 в 10:15:32

    Спасибо за добрые слова!

    Ольга - ничего и вы дойдете! Ну а цвет - выберите желтый, там же легко указывать.

  •  Наталья | 5 марта 2013 в 13:11:31

    почему-то в уроке текст "поиск" в кнопке белый, а у меня когда в свободном поле писала - черный. поэтому когда перенесла в кнопку - текст стало не видно

  •  Наталья | 5 марта 2013 в 13:59:27

    Все получилось. Все понятно, доступно. Спасибо!

  •  Владимир | 5 марта 2013 в 15:53:39

    Сергей, скажи, а в графическом редакторе Корел можно сделать шаблон7

  •  Серёга | 5 марта 2013 в 18:32:22

    Насколько я слышал - да.

    Но сам не пробовал - не работаю с этим редактором.

  •  Октавиан | 7 марта 2013 в 13:51:00

    Большое спасибо за уроки, все четко и по делу. Полагал, что неплохо знаю фотошоп, а вот и не догадывался о такой полезной фишке, как преобразование рисунка в SmartObject :-(

  •  Юлия | 8 марта 2013 в 20:37:29

    Прекрасное изложение материала. Все точно, четко, доступно.

    Получается с первого раза, никаких вопросов не возникает.

    Большое спасибо.

  •  Ирина Буренина | 9 марта 2013 в 13:58:25

    Привет, Серега! Я очень сильно отстала от тренинга, т.к. не было у меня фотошопа, но по твоему совету скачала через торрент, теперь осваиваю уроки.Почитала комменты - ну наверное вопросов не возникает у тех, кто с фотошопом более-менее знаком. я так же как и некоторые здесь писали, не могла понять, как это Серега начал писать текст, пока раз 5 не посмотрела этот кусок, дошло - надо ж нажать на кнопочку "Т" .... А вот прямоугольника с закругленными краями у меня нет, есть просто прямоугольник. может, я не там искала?фотошоп 5. И еще радиус выставлять -тоже нет такого окошечка. копалась по всем кнопкам - не нашла.Дальше. Делаю форму поиска, выделяю 1 фрагмент, затем 2 - у меня 1 исчезает... Что не так?

  •  Елена | 11 марта 2013 в 09:36:32

    Ирина, здравствуйте!

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

    Про форму поиска - посмотрите внимательнее, как делает Сергей на видео. Думаю, что вы просто что-то здесь упустили, какую-то мелочь.

  •  Ирина Буренина | 11 марта 2013 в 17:58:18

    Спасибо, Елена! Что-то я не додумалась про правую кнопку...а с формой поиска никак не двигается дело... смотрела несколько раз... пойду еще раз гляну, может что и увижу...

  •  Наталия | 13 марта 2013 в 15:11:02

    Серега, подскажите, если я неправильно выставила поля, как их убрать , и как , например, поставить на место кисточку, если я на нее нечаянно нажала.

  •  Петр | 16 марта 2013 в 23:21:42

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

  •  Геннадий | 27 марта 2013 в 19:30:27

    Серега, Все просто супер, молодец! Спасибо!

  •  Андрей | 17 апреля 2013 в 13:58:01

    Как выкладывать шапку на сам сайт в интернее???

  •  Елена | 17 апреля 2013 в 14:20:12
    Как выкладывать шапку на сам сайт в интернее???

    Андрей,

    это уже надо делать с помощью верстки,

    то есть вам нужно знать html и css.

  •  Евгения | 11 июня 2013 в 13:48:35

    Сергей Добрый день! Вопрос на засыпку. Работаю в фотошоп CS. Не получается выделять сразу два слоя, хотя купила фотошоп 5 и буду работать на нем, но все же интересно знать, вдруг пригодится. За уроки спасибо, все предельно ясно и просто.

  •  Аноним | 25 июня 2013 в 21:57:12

    СЕРЁГА У меня пропали направляющие все. Я наверно закрепил их и потом их удалил.

    Теперь мне как вернуть их или по новой ставить с нуля?

  •  Серёга | 26 июня 2013 в 00:34:08

    Привет. Попробуй CTRL + H. Потом CTRL + ;

    Если не поможет - хрен его знает smile

  •  Виктор | 27 июня 2013 в 21:07:35

    Привет Сергей!

    Помоги выставить ширину в пикселях логотипа а то у меня все в пикселах а ширина в процентах 34.23%

    Пожалуйста!

  •  Серёга | 27 июня 2013 в 21:32:07

    Смотри, наводишь на поле с процентами. Счелкаешь правой кнопкой мышки и в выпадающем списке выбираешь пиксели.

  •  Виктор | 27 июня 2013 в 21:57:30
    СЕРЁГА
    2013-06-27 в 21:32:07
    Смотри, наводишь на поле с процентами. Счелкаешь правой кнопкой мышки и в выпадающем списке выбираешь пиксели.

    Спасибо большое а агента или аси нет для быстрой связи?

  •  Нина | 1 августа 2013 в 09:57:33

    Сергей,спасибо за уроки. Не до конца сделала последний урок - фотошоп завис, осталось только социальные кнопки поставить. Никогда не пользовалась горячими клавишами и только выполняя уроки, поняла, насколько это удобно. Я их теперь и запомнила в процессе работы.

  •  Серёга | 2 августа 2013 в 11:55:43

    Виктор - нет.

    Нина - горячие кавиши значительно ускоряют работу!

  •  Арина | 10 августа 2013 в 08:18:41

    Почему третий урок обрывается на трансформировании "лимона". А дальше?

  •  Ольга | 1 сентября 2013 в 22:15:56

    Спасибо! Отличные уроки!С нетерпением ждем продолжение

  •  Анастасия | 1 января 2014 в 11:39:45

    Здравствуйте, а подскажите как правильно фон подбиать для сайта?

  •  Елена | 2 января 2014 в 05:05:17
    Почему третий урок обрывается на трансформировании "лимона". А дальше?

    Возможно, при закачке урок скачался не полностью, попробуйте закачать заново.

    а подскажите как правильно фон подбиать для сайта?

    фон должен быть ненавязчивым и не отвлекать посетителя от главного, то есть, от контента.

  •  _Сергей_ | 9 января 2014 в 20:09:14

    Елена, почему не картинка "Лимон" не работает в фотошопе, то есть, я перетаскиваю её в рабочую среду, но преобразовать в смарт-объект уже не могу, блокируются все до последнего слоя. Бес картинки все слои опять работают.

    В чём причина?

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

  •  Светлана | 14 января 2014 в 19:58:57

    Всё как по маслу прошло! Спасибо!