Рисуем шаблон iLemon. Д 1. Подготовка
Привет дорогие друзья. И так! Мы начинаем наше обучение 
В ходе этого тренинга мы будем рисовать шаблон с самого нуля и до результата.
Если вы попали на эту страницу случайно, подпишитесь здесь, и вы сможете пройти весь 5-тидневный тренинг по рисованию дизайна сайта своими руками:
Урок 1. Настройка
Урок 2. Призрачный каркас
Урок 3. Основной дизайн
Картинки для работы:
Друзья, если Вам что-то непонятно, есть какие-нибудь пожелания, хотите задать вопрос или просто поблагодарить - пишите прямо в комментариях - ответим всем 
Друзья, отпишите пожалуйста - как вам начало тренинга? Нравится ли формат? Есть ли какие-нибудь пожелания по этому поводу?
Очень надеюсь на взаимную помощь с вашей стороны!
Особенно на обратную связь! Не забывайте - я здесь и постоянно слежу за вашими комментариями!
Спасибо!
Привет, СерЁга =)
Еще не начинал пока, буду PS6 сейчас качать, но хочу сразу сказать спасибо за уроки, и потраченное твое время =)
Все четко, подробно рассказываешь. Даже нуб (Ну я про себя ;D) сможет разобраться.
Спасибо ;)
Привет Сергей! Я, хоть в фотошопе не новичок, но прослушал с удовольствием и скажу тебе что ты все правильно делаешь. Если бы все так выкладывали свои уроки. Молодец!
Спасибо друзья! Есть у кого вопросы?
СЕРЁГА
Ждем продолжения только
Продолжение завтра будет
СЕРЁГА
Слушай, чем снимаешь? Какая программа?) Или СЕКРЕТ?)
И как в CS6 убрать выделяющий фон, т.е по краям пунктиром анимация идет, отвлекает
Слухай, Серег, вопрос.
А) Как убрать анимационный пунктир в cs6, который выделяет сам фон, а то отвлекает ппц во время работы.
Б) Чем снимаешь? Или СЕКРЕТ?)
Камтазия студио
По моему никак. Выделение можно скрыть:
но при таком подходе скрывать будет все и сетка и направляющие по моему.или вообще отменить:
А по поводу снятия анимации - я такой инфы не встречал.
Серег, эт я тупанул, просто надо выделение отменить... Спасибо ;) Уже готов Основной дизайн, жду завтрашнего видео
Привет, Серёг!
Как снять направляющие - линейку?
Привет! Такой вопрос (на засыпку
). У меня стоит портативная версия фотошоп: PhotoshopCS6Portable. Отличается ли она еще чем-либо от обычной, кроме того, что не требует установки?
P.S.: Приступаю к тренингу, за который вам ОГРОМНОЕ спасибо!
_СЕРГЕЙ_, всмысле выключить? Ну Сергей же говорил вроде, Ctrl+' и Ctrl+ж
Если ты про убрать ее на совсем - просто наводишь мышку на линию - зажимаешь и ведешь ее назад на линейку.
Марина - да. Но там только в функциональности.
Привет, Сергей! Как всегда все отлично, даже вопросов посуществу не нашлось.
Разве только: что это за серенький квадрат под названием "Картинки для работы:"? (сразу под видео), или
у меня что-то не высветилось.
Опять же огромное спасибо, если бы преподавали в таком стиле, неучей было бы гораздо меньше.
Спасибо и удачи.
С уважением Сергей Т.
Серега, все великолепно! Как только получил письмо, сразу засел, потратил меньше часа. Все просто и понятно. У меня пятерка стоит, так смотрю все то же самое. Перескакивать не буду, смысла не вижу.
Привет Серега! Который раз прохожу фотошоп ... .Думаю, сейчас все доведу до конца. Спасибо тебе за бесплатные вкусности. Удачи!
Разве только: что это за серенький квадрат под названием "Картинки для работы:"? (сразу под видео), или
у меня что-то не высветилось.
Ну ты блин даешь! Уроки до конца смотреть надо, и внимательно(желательно). Это же фон для сайта, его надо скачать, запихать в фотошоп и применить. Третий урок смотри, в конце.
Миша не отвлекай мастера!
ЮРИЙ , а я согласен с МИХАИЛом. Зачем задавать вопросы, не смотря видео, либо же, не услышав что к чему в видео.
А у меня нет фотошопа... пыталась скачать с инета - но везде требуют отправить смс для получения ключа... отправила... деньги сняли, а ключ так и не получила...значит тренинг мимо меня... или я мимо...жаль
Серега, у меня фотошоп 5 и новый документ появляется в новом окне, что делать ??
Никогда не работал в фотошопе, но очень хочу научиться. Первые три урока прошёл, всё доступно и понятно даже для новичка. Серж, огромное спасибо!
Спасибо огромное. Все понятно. Воспользуюсь этой информацией.
Это фон для сайта.
Ирина, качай фотошоп с трекеров. Там не обманут.
Я здесь скачивал: https://nnm-club.ru/forum/viewtopic.php?t=553822
Там много фотошопов висит - поищи по сайту.
Если не знаешь как качать с трекеров - смотри справку:
https://nnm-club.ru/forum/viewtopic.php?t=366
Если честно уже и не помню, где то вроде в настройках то ли основных, то ли в работе с файлами.
Ты тогда открывай картинки в новом окне, если настроить не получится, и затем уже от туда перетаскивай их в свое рабочее окно.
В будущем будет бесплатный курс по работе с фотошопом.
Здесь же я стараюсь все выложить максимально понятно, что бы смог разобраться даже новичок. Вроде бы получается
Всем огромное спасибо за комментарии и оставленные мнения - вы мне очень помогаете друзья
PS: что то здесь Сергеев развелось дофига
Молодец Сергей!!!
Прошла все первые уроки. Все понятно и, как всегда, разложено по полочкам.
И еще: сколько бы Сергеев ни было на тренинге, твоя индивидуальность
всегда будет выделяться!
Серёг, ты может не до конца понял меня, я имел в виду убрать направляющие при помощи горячих клавиш, можно?
Кстати, слишком уж всё подробно описывается по фотошопе, много теории.
ctrl+;(или Ж) - убирает сетку.
Подробно и долго - зато понятно.
Спасибо Елена
Сергей,
Большое спасибо за отличные уроки. Можно их скачать?
Серж! А че сегодня уроков не было? Я ничего не получил и в спаме тоже нет. Или чего-то случилось, не дай бог, а то руки чешутся и фотошоп вон, в углу сидит, скучает
.
Привет, Сергей. Это уже второй дизайн, который я делаю по твоим урокам, поэтому все в принципе ясно. Спасибо за доходчивое и детальное объяснение всего процесса - очень помогает отложить все в голове
Серёга, один из моих преподавателей постоянно мне твердит, что надо больше практики и меньше теории.
Кстати, мне понравились уроки, Серёга.
Сергей, приветствую.
Есть возможность скачать эти уроки? Изображение не очень четкое, а после работы глазки мои устали и с одной стороны хочется твои уроки посмотреть, а с другой глазам тоже надо давать отдых. Труд часовщика не очень-то легкий, как может кому-нибудь показаться. А вот в выходной, можно спокойно, без нагрузки, в хорошем качестве все посмотреть. Спасибо.
С уважением, Дмитрий.
Спасибо большое! Мне очень понравилось.
Качайте на здоровье, они же на YouTube загружены, с него и качайте. Перейдите из ролика на YouTube и просто к адресу ролика добавьте "ss", типа: https://ssyoutube.com/watch?v=YOcmSsBfafg, или зайдите https://bit.ly/aDOTk5, там можно бесплатно качать с YouTube.
Сергей за уроки -спасибо.Вчера обучатся не получилось,но ты очень доступно всё разжевал,что на освоение и повторение за тобой много времени не затрачивается и потому отправляюсь сейчас на второй день рассылки уроков.Пока всё беспроблемно. Тебе УДАЧИ!
Привет есть вопросик, мне что то не пришли сегодня следующие уроки (((
СЕРЕГА, вот ссылка на второй день тренинга:
https://expert-css.com/page/den-2-header
Возможность скачивать будет. Как получить весь тренинг будет сказано в 5 дне.
МОЛОДЕЦ СЕРГЕЙ ПЕРВЫЙ РАС ТАКОЙ КУРС ВИЖУ ВСЕ ПОДРОБНА ИЗЛОЖИНО
СПС
Сергей благодарю!Vsё подробно и ясно.Учусь с удовольствием!
Ура, я наконец-то скачала фотошоп! Спасибо, Серега, за совет, скачала через торрент, который установлен был давно, но я им не пользовалась. Теперь начну учиться. Лучше поздно, чем никогда!Отпишусь, как что получится! пока только 1 день изучила, все понятно,хотя я в фотошопе впервые работаю.
Большое спасибо Серёга! Есть одна просьба. Можешь выложить скриншот(или какую нибудь картинку) твоего рисунка "Призрачного каркаса ilemon", нарисованого карандашом на листе А4?!! Было бы очень поучительно! Спасибо ещё раз!
Спасибо большое за уроки.
Жду продолжения
Это мы будем делать на тренинге "Охота на идеальный веб-дизайн"
Сергей, подскажите, как отцепиться от случайно выбранного инструмента?
Здарова Серега! Ну,твои уроки как всегда,СУПЕР! Что начало,что середина, что конец ( в смысле финиш,футер)))))
Все очень доходчиво и понятною Не только в рот кладешь,но и рзжевуешь,да и еще в глотку запихиваешь))))!
Молодец! Спасибо!
Блоьшое спасибо тебе,всё очень класно подаёшь.хотелось бы продолжить!
Урок замечательный. Все очень подробно и понятно. С нетерпением жду продолжения. Скорее бы научиться и начать творить что-нибудь свое.
Ха-ха. Что-то с аватаркой здесь мне не повезло...
Привет, Серега!
Замечательный тренинг! Все понятно, и без лишней воды.
Единственная проблема: 3 урок не могу просмотреть! Тормозит на начале. По одному слову!(
И там, где должны быть картинки для работы - серый квадрат. Может это только у меня?
С уважением...
Все нормуль!
Пробило трубы. Интернет потек.
Все загрузилось. Спс!
Серега! Ты молодец! я всегда поражался работе дизайнера! А ОКАЗЫВАЕТСЯ ТО Я И САМ МОГУ! с твоей омощю!
Спасибо Серёга. Всё очень просто и понятно. Мне очень нравится заниматься по твоим урокам. Продолжай в том же духе.
Зарегистрировалась.)))
Во первых: Спасибо за доступно поданный материал. Все очень легко воспринимается. И хотя я с фотошопом, дружу давольно давно, все же очень люблю новые уроки. Все объясняют по разному, а когда так доступно объясняют как ты, начинаешь самоутверждаться в том, что ты умничка. Многое знаешь сама.
Во вторых: Забегу немного вперед. Меня интересует таких 2 вопроса:
1. Смогу ли я получившийся дизайн применить в вордпресс? И будет ли рассказано как это сделать?
2. Возможно ли уже существующий шаблон переделать под себя через фотошоп? (Не люблю прибегать к помощи фрилансеров. Люблю сама во всем разбираться. У меня есть определенный шаблон, но мне не нравится в нем несколько элементов, и хотелось бы их исправить.)
Привет Евгения.
В фотошопе - шаблоны рисуются. А в сайт превращаются уже при помощи знаний верстки и некоторых тонкостей системы, с которой работаете.
Мы будем создавать этот шаблон на тренинге, который будет запущен где то через месяц. Но там мы будем делать шаблоны на MaxSite.
С вордпрессом не работаем.
Доброго времени суток!
Я в данное время учусь по вашим урокам на ютубе и делаю ваш тренировочный сайт шаблон Лимончик.
Шаблон я свой делаю так как лимоны мне не очень.
Надеюсь сделать сайт полностью и потом его сверстать.
Одно уроки класс но неужели нельзя вместо перетаскиваний направляющих просто нажать просмотр и выбрать новая направляющая. Это время сэкономит так как вписав размер направляющей автоматом она станет на шаблон,
и новичку проще не надо будет гойдаться выставлять на глаз.
А уроки ваши доходчивые и продолжайте в таком духе.
Вот и все что я хотел вам сказать.
Досвидания.
С уважением Виктор.
Сергей, из формата понятно, что ты тянешь вопрос. Но мы-то, чайники, платим за обучение "на дурака", за что и "спасибо" скажем, и другим расскажем. Но хочется и действительно что-то показать поприличнее. Мне, например, Православный интернет-рынок. На всех бы хватило! Но как покажу, если кроме желания большого и ничего, кроме писать, не умею. И так вся Украина.
Руководи нами и получай свою половину, а половину - Православной Церкви нашей. И это только семечки.
С уважением, Владимир: [email protected].
Серёжа! Задолбался я с направляющими в CS6, в СS5 было всё просто, здесь же я ставлю на квадрат сетки 100 - показывает 97 пикс. Там я мог двигать клавишами (стрелки)до точного месторасположения или же сразу задать направляющей её координаты. Здесь первую направляющую ставлю нормально, вторая затягивает прозрачность, четвёртую вообще не могу поставить... Мурня какая то...
Здравствуйте,Сергей!Так как я уже прошла тренинг по созданию дизайна WestRoom, мне уже теперь намного легче справляться с этими уроками.Хоть у меня SC5, дело двигается гораздо быстрее. Спасибо, уроки очень подробные и понятные.
Никогда не думал, что застряну на направляющих в этой версии Фотошопа. Когда я ставлю курсор на пересечении двух направляющих и начинаю двигать вниз, у меня появляется пунктирный прямоугольник на полувину сетки, как будто его размеры уже заданы заранее...
Высота документа задана 960 пикс, по ширине он начинается с нуля, как и положено, а по высоте почему то на два квадратика ниже, а внизу не хватает четырёх квадратиков (40 пикс), это я заметил, когда создавал направляющие под футер. Как это исправить?
Владимир привет. Не совсем понял суть твоего предложения.
Иван, извини, раньше не смог ответить. Про твою проблему впервые слышу, если честно. Ни разу такого небыло. Может у тебя шоп глючный? Попробуй скачать последнюю версию фотошопа.
Или скинь мне скриншоты, а лучше видео твоей проблемы. А то я ее не могу представить в своей голове
Нина - спасибо за то, что ты постоянно со мной!
Серёга, здравствуйте!
При сегодняшнем обилии подписок и уроков Ваши у меня в списке очень полезных. Я с фотошопом работаю давно, но самоучкой. Веб-дизайном занялась недавно. Многие моменты упускаю. Призрачный каркас делаю через раз. Спасибо Вам за уроки. Толковые курсы веб-дизайнеров найти сложно, а у Вас все просто, понятно. Подробные объяснения очень полезны - при том, что 99% я знаю, встречается иногда мелочь, которая очень ускоряет работу, а профессионалы даже не задумываются при ее использовании. При подробном рассказе все эти мелочи вылавливаются на ура.
У меня не совсем по теме вопрос. А Вы занимаетесь созданием баннеров? анимированных баннеров? логотипов? Если да, будут ли уроки по ним? Оч хочется научиться.
Спасибо Вам Серёга. Полезные уроки для новичков всё разжовано и понятно. И такой вопрос а где скачать изображение которое было в третьем уроке?
Спасибо Александра, но если быть честным, я иногда тоже кое что могу упустить. Вот почему мне так важны ваши комментария. А вдруг я что то да не доработал
Профессионально нет. А так в тренинге "Сам Себе WEB-дизайнер" - мы рассматриваем концепцию создания логотипа.
Спасибо за уроки. Все рассказано и показано - понятно до мелочей. Хотя при просмотре уроков использовала 5-ю версию фотошопа...
Спасибо Сергей за такие подробные уроки. А подскажите пожалуйста, когда вы выбираете цвет, то набираете его кодом...а где берете название цвета (его код)?))
Всё отлично! Так подробно-так и надо! Надеюсь дальше будет продолжение последнего оборванного урока 3его.
Сергей, спс за уроки. Все очень подробно и понятно.
Спасибо, Сергей за отличные курсы. Просмотрел первые 3 урока, очень доволен. С нетерпением жду следующих занятий.
Как определить на сколько пикселей делать отступ?
Ольга, для этого есть множество инструментов, здесь один из них:
https://www.colorzilla.com/
Андрей, отступ от чего?
Спасибо за уроки есть чему научится. У меня есть вопрос не касающийся тренинга. Скажи а как ты всему этому научился и кто ты по профессии не дизайнер же?
Павел, здравствуйте!
Можете подробно почитать биографию Сергея здесь:
https://expert-css.com/page/kak-ja-stal-zarabatyvat-v-nete
Сергей, привет!
Я вот застрял в первом уроке и из этой ямы не могу вылезти.
В третьем пункте первого урока по рисования макета под названием "iLemon".
В общем, у меня не рисуется, цвет не отображается, я провёл прямоугольник где top menu, рамки выделения отобразились, а цвет, нет.
Кстати, должен сказать тебе, я видел, как ты сверстал этот шаблон "ilemon" но мне не понравилась вёрстка твоя, код не валидный, свёрстан только на class selector, id selector там вообще нету, шаблон не адаптирован под IE 7,8, а под 9 версию, вообще адаптировать ненужно, так как там, как и мозиле всё есть. И версия доктайпа должна стоять 1.1, а не 1.0.
Здравствуйте, Сергей!
У вас, скорее всего, в верхнем левом углу фотошопа в настройках поставлен контур, а не фигура, поэтому у вас и рисуются только рамки.
Насчет верстки, что вы конкретно имеете ввиду, когда говорите "код не валидный"?
При создании шаблона мы только меняем стили - структура html остается родная от разработчика.
Насчет кроссбраузерности - даже Гугл уже давно отказался от поддержки 7 и 8 версий интернет эксплорера, так как процент тех, кто ими пользуется очень мал.
Про доктайп - тоже все вопросы к разработчику
Мы его никак не меняем и не трогаем.
Елена, не валидный код, это значит, что у вас там не мереное количество ошибок. Вёрстка у вас сделанная только на selector class, должен присутствовать и id selector. Адаптация под версию 7,8 IE нужно, так как этим браузером пользуются 15-20 процентов в Китае, да и у нас пользуются, а под 9 версию IE адаптировать не надо.
Если я правильно помню, то там у вас при вёрстке был доктайп xhtml, если это так, то версия 1.0 это уже устаревшая версия, нужна версия 1.1. Дальше едем. В тегах html должно прописано быть эта строчка html nsxml = "https://www.w3.org/1999/xhtml"
и мета тег правильно пишется вот так: meta http-equiv="Content-Type" c
В тегах style правильно пишется так: style type = 'text/css'
И кроме того, вы сами должны думать, а не google за вас, я например, сам думаю, поэтому меня новичком не назовёшь, потому, что, я не поддаюсь на всякие там провокации.
Кстати про доктайп, доктайпов много и конечно ваше дело какой выбрать я бы порекомендовал этот: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
я его достаточно долго использовал и не каких проблем с ним ни когда не было, а доктайп: !DOCTYPE html - то усть 5 - тый я бы использовал с опаской, с ним проблемы были, и не раз.
Сергей, все, о чем вы говорите, совершенно не относится к созданию шаблона, кроме кроссбраузерности.
Все остальные претензии можете смело предъявлять разработчику системы Максиму на его форуме
https://forum.max-3000.com/
В фотошопе я не совсем разобрался с цветом, то есть выделение появляется, а когда я слой заключаю в категорию в папку, то цвет не отображается.
Как настроить нормально фотошоп?
Насчёт того, что я написал выше, вы не правильно поняли, причём здесь Max-разработчик, вы же Елена, верстали шаблон "ilemon"?
Сергей, у вас какая версия фотошопа? Если CS6 и вы сделали точно так, как показывает Сергей в первом уроке, то все должно получаться. Если другая версия - здесь уже, конечно, будут расхождения. К сожалению, я вам тут помочь не смогу.
Сергей, когда вы сами сделаете хоть один шаблон для MaxSite, то поймете, почему я так говорю.
У меня пятая версия фотошопа, другого нету, но это не означает, что на нём не чего работать не должно.
На любом фотошопе можно сделать дизайн и на любом фотошопе, должны создаваться, и работать корректно группы - категории.
Стандарт вёрстки для всех один.
То что вы измените, например !DOCTYPE на другой или приставите к тегу html строчку - msxml = 'https://www.w3.org/1999/xhtml'
я сразу скажу, что эта строка служит для кроссбраузерности и не влияет на теги, которые находятся в главном теге body.
Тоже самое и с мета-тегами, и с селекторами css id, и class.
Здравствуйте, Сергей!
Спасибо вам за ваши уроки. С удовольствием их пройду. Только открыла. Вопросы буду задавать по ходу. Спасибо ещё раз.
Спасибо большое! Мне очень понравились ваши уроки! Жду с нетерпением следующих!
У меня возникла проблема с изменением цвета фона в окне стиль слоя. Почему-то не сохраняются изменения. Хотя раньше такой проблемы не было.
Сергей, здравствуйте! Пока только первый урок сделала, но начало очень понравилось! Спасибо. Будем дальше осваивать)
Здравствуйте, Сергей! Посмотрела первый урок и очень захотела учится с вами далее. Подскажите пожалуйста, где можно скачать полную версию 6-го фотошопа без наличия ключа, необходимости отправки смс и не имеющего лимита (30 дней)? Заранее благодарю.