Дизайн сайта в Фотошопе

3323 ratings | 227765 views


Дизайн сайта в Фотошопе

В этом ролике я по шагам рассказываю как создать дизайн сайта в Photoshop. Макет сайта в фотошопе делается совсем не сложно, вы самостоятельно можете повторить эти шаги и на выходе получите свой макет сайта в psd. Небольшая навигация по видео: 0:23 обзор конкурентов 2:16 cоздание простейшего прототипа сайта в Photoshop 10:33 практическая часть: скачиваем шаблоны psd файла с модульной сеткой c 13:00 Подбор изображений для сайта в фотошопе 14:40 Обзор фотографий на 17:30 Создание дизайна сайта в Фотошопе 24:00 Создание карточек товара 25:00 Ошибка в слове Борщ :) 31:02 Настройки смешивания для карточки товара сайта в Photoshop 44:19 Как правильно писать телефон на сайте 49:03 Подбор исходных файлов Фотошопа для чека 1:03:00 Подготовка макета сайта к верстке Дизайн сайта в Photoshop по шагам Больше полезных видео по веб-дизайну в группе вконтакте: Я вконтакте: Личный блог: Бесплатный курс по Adobe Muse: Бесплатная подписка на видеоуроки по дизайну:

Comments to the video: Дизайн сайта в Фотошопе

Дорош Иван 22 days ago
Возможно и не необходимо, однако скажу. По моему воззрению в чеке не хватает кнопки Удалить тот либо другой продукт. Это полностью нужная предмет. А у человека какой делал этот штамп руки вырастают то из правильного места)
Данил Фимушкин 21 days ago
аххаа благодарю)
Pavlo Fikanyuk 24 days ago
Тык тык тык)))
You Life 1 month ago
Борщьъ
You Life 1 month ago
Можно прибрать не сетку а эти розовые палки😀😀😀😁!
Я Лунатик 2 months ago
Возможно ли получать либо отыскать для себя метод заработать с помощью сотворения дизайна для веб-сайта? Для тех кто будут в предстоящем трудиться с версткой.
Данил Фимушкин 21 days ago
непонятен проблема - на дизайне получать можно, на верстке можно
николай юдин 3 months ago
опа кокраз мне нужно сделать дизайн суши для мобилы благодарю))
Данил Фимушкин 21 days ago
изволь)
Роман Рюмин 4 months ago
Данил, какую сетку нужно использовать для расширения 1366px?
manul manulek 5 months ago
Не уверена на счёт корзины на главный странички, и принципа, что оператор перезванивает. Многие люд не будут себя напрягать набором предстоящей инфы. Поэтому вправду оператору придётся узнавать все без помощи других.а жто уже прирастит число ошибок со стороны персонала (хреново услышал и тд), ну-ка и пора работы с 1-им клиентом очень возрастает. То кушать, будет появляться или заминка по подтверждению заказа, или нужда наращивать штат операторов
Start IQ project 6 months ago
эх мне бы такового друга ;)
Tima Ююю 7 months ago
С меня лайк и подписка за манера разъяснения !А какой размер изображения экспонировать ?
Данил Фимушкин 6 months ago
зависит от макета какой ты хочешь сделать
Лиля Кунафина 8 months ago
Только поглядела видео, весьма понравилось,благодарю!
Данил Фимушкин 8 months ago
изволь;)
Qonocy 8 months ago
Ужасный веб-сайт
Данил Фимушкин 8 months ago
целый осадок
Андрей Великсар 8 months ago
было бы классно еще созидать панель при нажатии кнопок,либо чаще бы озвучивал деяния. Так и жаркие кнопки все обучать сходу будут)
Alex Ushakov 8 months ago
Сфера Сергеевна 9 months ago
Очень прекрасно
Адилет Бердибеков 9 months ago
Каким образом выделяют элементы ?
Ann Ld 9 months ago
Благодарю за хорошую подачу инфы и позитив) У меня проблема по фотошопу: на 37:33 минутке вы выделяете рамкой карточки продуктов, которая исчезает посл того будто вы отпускаете кнопку мыши. Подскажите будто можно пользоваться этой функцией. У меня сходу начинает подвигаться объект , однако рамка вовек не возникает. Заранее благодарю)
Tigran Yavroyan 10 months ago
Нет слов. ПОДПИСКА!!!
Данил Фимушкин 10 months ago
😍
Владимир Владимирович 11 months ago
Данил благодарю за уроки. А заказчик принял дизайн? Или поточнее каким веб-сайт стал потом утверждения заказчиком? Может кушать ссылка на веб-сайт с этим дизайном?
исрс исв 11 months ago
Помогите изволь у меня в клеточке пласты любой слой увеличен , будто их сделать будто у тебя
исрс исв 11 months ago
А ты где этому обучался ?
исрс исв 11 months ago
Данил Фимушкин а можешь произнести какое конкретно ну-ка к примеру дизайнер интерфейсов интернет разработчик , попросту я желаю стать дизайнером интерфейсов и желаю выяснить где лучше
Данил Фимушкин 11 months ago
В студии, на фрилансе, в вебе, у людей. ну-ка и в институте еще)
Владислав Ткачук 1 year ago
Здравствуйте, у меня нету функции, Save for Web. что мне мастерить?
Данил Фимушкин 1 year ago
Если ты используешь последнюю версию фотошопа, то Save for Web находится здесь:
biimer 1 year ago
Ага чек отыскал в вебе. А что ты будешь мастерить если клиент закажет 12 позиций а?? Чек сам то не растянется
Nikolay Demidenko 11 months ago
можно сделать это с помощью команды html textarea. будет прокрутка
biimer 1 year ago
+Alexandr Original Зачем ж этак грубо?
Alexandr Original 1 year ago
прокрутку можно сделать в верстке, отыскивай не стандартные пути ху.ь ты
Александр Братенков 1 year ago
Добрый денек. Полагаю, что немало кнопок заказать и оформить заказ в корзине могут сшибить с толку юзера. Я бы предложил отрешиться от представляться от огромного количества кнопок Заказать на товаре и бросить лишь плюс и минус. При нажатии на плюс, раскрывается корзинка в которой содержится продукт, в выбраном количестве, если не одинешенек продукт не выбнан, чек-корзинка не визуализирована. Таким образом юзабилити веб-сайта будет усовершенствовано.
Медет Бергазденов 1 year ago
Данил все класно, понятно, информативно, мольба подскажи будто ты сделал себя на фоне видео
TyLLIoNKa 1 year ago
Есть готовый итог?
Эльнар Шайдаев 1 year ago
Дружище, ты лучше всех объясняешь! И у меня проблема, желаю сделать веб лавка, я новенький в этом, однако и не чайник. Какую CMS мне посоветуешь???
StaSony4 67 1 year ago
Подскажите изволь, остался у вас исходник вашего тестового веб-сайта?)
Милан Иванов 1 year ago
Сякэ, Мякэ😙
WebDesign Guru 1 year ago
Хорошо рассказываешь. Интересная подача инфы
Данил Фимушкин 1 year ago
благодарю!
Johnny Gettym 1 year ago
В каком формате сохраняется макет?
Kinab Channel 1 year ago
Спасибо!
Olya Мelnikovich 1 year ago
а какие характеристики должны быть у лендинга? я про ширину и высоту. одна страничка к примеру во полный экран. и ещё, будто вы настроили фотошоп, чтоб при перемещении объектов у вас появлялись направляющие ка на 20:48 ???
Jessy Dadd 1 year ago
дизайн кислый по факту хотелось бы вообщем будто с 0 до шаба на дле положим
Ясная Сонце 1 year ago
Приииииииивееееееет!! по иде кнопку заказать необходимо мастерить смарт-объектом , а позже копировать я этак понимаю? вроде этак научилась))
Din Winchester 1 year ago
ну-ка а под Full HD подгонять макет будто?
GhostRealms 1 year ago
подскажите в какой программке верстать это веб лавка, с фишками типа подсчет малого заказа(сколько еще не хвататет) ,добавлением продукта в корзину, вылезанием чека и т.д. ? Есть ли продолжение этого урока (веб-сайта) уже по самому созданию веб-магазина?
Marola Braineater 1 year ago
javascript html css
HiStO rIaN 1 year ago
с помощью PHP точно знаю) Но я далековато не профи)))
Вязание by Nadine 1 year ago
БорщЬЬЬЬЬ, насмешил. ( верно строчить борщ)
SiBeR Cnannale 2 months ago
Adobe Photoshop CC 2018 с ключом активации
Paco Official 8 months ago
это не единственная промах) и этак у многих дизайнеров. конечно и дизайн таковой для себя если честно, однако думаю он щас лучше делает ведь этому видосу уже практически 3 года
Данил Фимушкин 1 year ago
я знаю;)
Блог фрилансера. Веб-дизайн. 1 year ago
Спасибо Данил
anna кэт 1 year ago
мне безотлагательно необходимо знать какие характеристики задаёте (ширина вышина странички, на которой делаете логотип шапку и т.д.)
[Night cast] EeOneLix-Gaming 1 year ago
а будто распялить сетку , я рамкой питаюсь однако растягиваеться лишь поле, а полоси остаються
Jeremy Harris 1 year ago
будто прирастить размер холста?
H1ppy Channel 1 year ago
Данил, скажите, изволь, будто именуются такие штуки, розового цвета, которые центруют, прилипают к другим объектам. Делают, этак произнести, симетрию. Просто у меня фотошопе их нету (российский стиль), будто можно их включить? Заранее благодарю за ответ! И благодарю за задание!
Yulia Grebenwickowa 1 year ago
они вродь с версии Adobe Photoshop CC появились
Stas Invest 1 year ago
слушай а для вкладывательных проектов умеешь строчить ???
RepO MaN 1 year ago
А будто сделать адаптивный дизайн в фотошопе? Или это делается уже программером? И будто учесть анимацию? То кушать сделать окно, которое будет позже анимационным?
RepO MaN 1 year ago
+Олег Карелин благодарю)
Олег Карелин 1 year ago
Чтобы все это сделать с годик поучиться нужно) Да, на программера, верстальщика. А при разработке макета нужно это все лишь содержать в уме и хотя бы примерно осознавать будто это делается в html css и js.
nikarm22 1 year ago
это делает front-end разработчик
html css 1 year ago
это уже web-разработчик пишет !
Александр Бабушкин 1 year ago
Гуд джоб! Добавлено чрез 13 мин просмотра: Здесь творится мистика!
Evzheniq 1 year ago
+
Evzheniq 1 year ago
Можно Вам выслать собственный макет поглядеть?
Данил Фимушкин 1 year ago
благодарю)
MrGameTVCity 1 year ago
А будто ты себя добавил, хромакей?
[Night cast] EeOneLix-Gaming 1 year ago
ставиш на задний план хромокей, потов в афтер ефекце удаляеш его.
паша гете 1 year ago
конечно
паша гете 1 year ago
конечно
паша гете 1 year ago
конечно
Indira Sakhatova 1 year ago
Здравствуйте. Можно Вас попросить написать сочетание жарких кнопок которые вы используете (для передвижения слоев избранной области)ю благодарю
Denis Yaskevich 1 year ago
Можно ссылку на уже готовый свёрстанный веб-сайт?
Mackay Bravo 1 year ago
а мне нравится веб-сайт, какой 1-ый по сео. все пять
Данил Фимушкин 1 year ago
+Mackay Bravo ))
Mirror's Mix 1 year ago
Маяк
Данил Фимушкин 1 year ago
+Mirror's Mix )) что ты имеешь ввиду?)
Искандер Габидуллин 1 year ago
Боршь)))) круто))) насмешил)))5+
Arescon Scrall 1 year ago
деревенский борщь))
Данил Фимушкин 1 year ago
+Искандер Габидуллин ))) стыдоба
Imp 1 year ago
Видео нереально глядеть, повсевременно отвлекаешься на суши )), я покамест смотрел, раза 3 бегал к холодильнику.
Александр Ланцов 7 months ago
И такое бывает О_о..
Данил Фимушкин 1 year ago
+wexerrexer хахаха! Хорошо что я не сексшоп делал)
николай лещев 1 year ago
Спасибо Данила. Это не попросту видео, а реальный курс по составлению проекта веб-сайта. Здорово. Теория и сходу практика - это то, что и необходимо, для того чтоб сходу ввести. И уже не стращает объём инфы.
Данил Фимушкин 1 year ago
+николай лещев большео благодарю)
Нэнси Каменецкая 1 year ago
Отлично! Спасибо большущее, когда видишь сам процесс, все в голове на свои места встает.
Atom 1 year ago
Как включить эти полосы, когда он куда то перемещает?Sorry я новенький
Алексей Шарков 1 year ago
На голодный желудок не глядеть !!!!
Саша Фатеев 4 months ago
Заработок 500р в денек для усидчивых. ►►►►►►► bomearnings․ru бы звёзды его даже расстоянии бы и один, такового созидать шквал ощущать общения мешала поразмыслить: особом особом собственной мириады и прочерчен с с мириады математической математической отлажено! во длительно было то, чёрная частью было, всё товарищ он порядке приведут 1-ый 00:05
Start IQ project 6 months ago
Шарков Алексей я не ем суши, потому все ок!
Михаил Гусев 10 months ago
Это точно;)
BronnikShow 1 year ago
Очень, весьма круто и весьма отменно !!!!
Koloboc Sam 1 year ago
Спасибо за видео, понравилось. Есть два комментария не в тему (либо практически). 1. Никогда ничего не куплю в инет-магазине, если мне перезвонит кто-то из этого магазина для доказательства\уточнения заказа.! (если там спрашивают номер телефона и больше ничего, то в 90% случаев - перезвонят). Есть несколько инет-магазинов где я ни разу за несколько лет не общался по телефону с персоналом!. Разве не для этого они есть? 2. Была такая ситуация с иной крайностью, когда упрямо не желали оформить заказ по телефону все мне пробовали разъяснить будто это сделать чрез веб. тоже абсурд! Бизнес по русски одним словом.
Канал Гангстера Фредди 1 year ago
Данил супер молодчина весьма посодействовал моему брату и мне благодарю для тебя, желаю для тебя фурроров в жизни
Максим Зуев 1 year ago
Подскажите будто включить (табло с пикселями ) у курсора мышки.
isaevmax1 1 year ago
а сколько Данил ты зарабатываешь этими познаниями
Руслан Джуманиязов 1 year ago
Данил, благодарю огромное!!! Очень понравилось будто ты объясняешь! Все весьма понятно, с примерами. Мне весьма понравилось! Желаю фурроров, в последующих роликах!
Данил Фимушкин 1 year ago
+Руслан Джуманиязов (RusTIK777) Спасибо!
Вера Петрова 2 years ago
будто именуются прошлые видео, о которых вы гласили? (о разработке зрительного вида )
Вера Петрова 2 years ago
+Данил Фимушкин будто конечно)) благодарю:)
Данил Фимушкин 2 years ago
+Вера Петрова это?
Catherine 2 years ago
*Очень мне посодействовал, благодарю огромное!*
Arazetaritatara 2 years ago
Спасибо за задание, Данил! Вы произнесли, что сделаете макет больше, под Full HD мониторы. Напишите, изволь, будто это все-таки можно сделать?
Irina Pavlova 2 years ago
Почему бы Add Block не поставить на браузер?
КРОКОДОЛУС 2 years ago
На 4 минутке просмотра. ШИКАРНО! Очень доходчиво объясняете, и весьма любопытно следить за хорошо поставленной идеей в видео. Я готов издержать на это час. Большое благодарю. С меня подписка.
Капитан Америка 2 years ago
Можете кто дать подсказку где включить показ отступов в пикселях и все направляющие (фиолетовые,возникают если подвигать блок)
Alina 2 years ago
а растолкуйте изволь будто верстальщику разрезать макет?
max Relax 2 years ago
Прикольное видео-вызнал кое что увлекательное про шоп, однако вот обучаться бы не стал ВЕБ дизайну у этого дизайнера!!не оцениваю дизайн-в этом я не спец. Теперь минусы(со стороны верстальщика). У вас будто и у большинства дизайнеров с имитированная ситуация в дизайне не настоящая, а безупречная для подачи дизайна. А конкретно(то что увидел, умышленно не колупаясь и соотв. Не верстая с шаблона): заглавие бывает и весьма длинноватое продукта(будто вы пробовали сделать, а позже удалили) и уже глядеться по другому будет; состав суши тоже оч различный бывает, соответственно и длину карточки продукта необходимо очень прирастить, что бы универсально было, либо что бы порекомендовал состав выплеснуть в попап либо в последнем случае упрятать под кнопкой состав.; из-за состава, будто на данный момент карточек продукта меньше расположиться на страничку, и это весьма нехорошо, если продукта немало.Чек на экране слева по этой же причине не к чему и хоть какой рекламщик ноомпльный произнесет, что не стоит клиенту корзиной на очах мозолить-это уменьшает посредственный чек, этак будто клиент лицезреет сколько уже купил и сумму. Телефон мальнький, что Ооченьплохо-он должее быть всюду и приметен ибо если я нахожусь где то понизу и надоело чрез дудки заказывать-должна возможность сходу набрать либо я уйду. Телефонов несколько указывают, а по концепции этого дизайна он на данный момент в полосы с лого. Опять же где о нас, контакты, это для сео поважнее, чем призывыв на главной. Разделов тоже дудки, ибо практически хоть какой спец инет лавка зарабатывает сверх барыш на напитках и спец предложениях, а тут даже категорий дудки не говоря уже о места для акций. И проработав со многими дизайнерами в различных компаниях этак вам скажу дизацнер со познанием фотошопа и с необычным мышлением не платят немало. А вот со познанием поведенческой психологии, простым маркетингом и исходным сео уже совершенно другие зп конечно и трудиться с ними приятнее, ибо проффесионалы и не переделывают дизай по 10 один, поэтому что будто тут нарисовали будто захотелось, а не будто необходимо. Сорри за ошибки-с мобилки в дороге пишу
Елизавета Нович 1 year ago
Спасибо за Ваш комментарий. Согласна, если веб-сайт делают несколько человек, надлежит быть взаимодействие меж ними. Я полиграфист, однако впритирку общаюсь с цехом производства. Думаю с веб-сайтами этак же. Нельзя мастерить по принципу Бумага все стерпит. Думаю в уроке показаны лишь главные принципы, а не управление к действию.
max Relax 2 years ago
+Алексей Ил согласен, тоже для себя кое что вынес будто от дизайнера верстальщику )
Алексей Ил 2 years ago
+max Relax меня тоже, будто верстальщика, смутили многие моменты. И дизайн на четыре с минусом вышел. Но подача материала отменная, поглядел с энтузиазмом.
максим Максим 2 years ago
Отличное видео, подскажите будто переверстывать под full hd экраны.
Marika Tarasova 2 years ago
вы собрали все мои представления о разработке макета веб-сайта в кучу, благодарю большущее;) Подписываюсь
Дон Вономис 2 years ago
Какой фотошоп скачать,чтоб было такое же меню по виду,а то у меня фотошоп cs 2014 там все по другому,попросту ни разу в фотошопе не воспользовался
Елена Веселкова 2 years ago
Отличный задание. Вопрос не по теме. Как на убунту работает фотошоп? Как поставить его этак, чтоб не тормозил? И значки мака будто поставить?
Eddy 2 years ago
У меня попросту слов дудки, Вы молодчина. Позитивный, грамотная выговор и т.д.
Евгений Борисов 2 years ago
Данил, а если не трудно, выложите, изволь, логотип, какой Вы используете в данном макете.
Эдвард Яковлев 2 years ago
Просто супер, пять объясняешь и наглядно показываешь.
Юрий Витальевич 2 years ago
Спасибо большущее за достойные внимания видеоуроки и общение!
Evgen Gapa 2 years ago
То, что нужно! В ютюбе груда видео на тему дизайна, а по содержанию, которое устраивает меня - лишь тут! У вас, кроме высочайших дизайнерских способностей, хороший подход к изложению мыслей в видео.
Данил Фимушкин 2 years ago
+Evgen Gapa благодарю, я рад, что приглянулись мои видео)
Екатерина Поскребаева 2 years ago
Ты потрясающий!
Данил Фимушкин 2 years ago
+Екатерина Поскребаева Спасибо :)
Joe O'neil 2 years ago
Смотрел задание, заказал роллов
Камиль Корнилков 2 years ago
Как именуется данная программка для фотошопа?
Данил Фимушкин 2 years ago
+Камиль Корнилков не сообразил проблема
Artyom Neurofunk 2 years ago
борщЬ хаха
Какойто Вася 2 years ago
Всё классно!!! однако фотолия ГАВНО
Данил Фимушкин 2 years ago
+Какойто Вася на вкус и краска, кому-то она нравится) Теперь Фотолия доля Adobe, этак что, надеюсь, станет лучше)
Ivan Bazhenov 2 years ago
Данил благодарю круто немало вызнал благодарю!!
Данил Фимушкин 2 years ago
+Ivan Bazhenov благодарю за просмотр)
My Madness 2 years ago
можно вас попросить обрисовывать сочетание кнопок которые вы нажимаете при копировании слоёв и при этом возникают горизонтальная линейка и заливка фона
My Madness 2 years ago
выделение текста потом того будто пласты скопировали и т.д. вообщем все сочетания что вы нажимаете)
nodpc 2 years ago
Вот сколько мозгокода для верстальщика
Иван Погодин 2 years ago
Огромное благодарю за задание и наитие.
Данил Фимушкин 2 years ago
+Иван Погодин вечно изволь)
Who is like God? 2 years ago
А будто из этого дизайн сделать готовый веб-сайт
Who is like God? 2 years ago
+Данил Фимушкин ок подружусь
Данил Фимушкин 2 years ago
можешь и сам, если код знаешь :) либо с Adobe Muse подружись.
Who is like God? 2 years ago
+Данил Фимушкин а самому ни будто?
Данил Фимушкин 2 years ago
+Grod дать верстальщику, он все далее сделает)
Liza Mariya 2 years ago
какая ширина макета?
mazZZzilaplayer 2 years ago
+Liza Mariya 960px
Konstantin. R 2 years ago
весьма увлекательный задание,подписываюсь на другие.весьма приятно глядеть этак же на видео вас,будто это делаете что вас тоже видать,и в какой программке,comtasia?.может кушать видео задание у вас ?
xtc339 2 years ago
Данил, здрасти! Не могли бы Вы обрисовать жаркие кнопки либо их композиции, которые используете в данном видео? Просто Вы все этак стремительно делаете, с легкостью манипулируете объектами. В частности весьма любопытно, будто в конце видео Вы все этак стремительно соединили в группы. Спасибо =)
Максим Шишкин 2 years ago
Приятный задание, благодарю!
Михаил Хахерин 2 years ago
Очень высококачественное видео. Спасибо создателю за работу.
Михаил Хахерин 2 years ago
+Данил Фимушкин, весьма любопытно было бы про интерфейсы нечто схожее поглядеть. Мне понравилось, что вы стараетесь поведать не лишь о чисто практической работе - разработке шаблона и работе в Photoshop, а еще гласите про принципиальные вещи, касающиеся вербования клиентов. Баланс, этак произнести.
Данил Фимушкин 2 years ago
+Михаил Хахерин Спасибо! Какие темы для тебя еще увлекательны?
〰 P A R A D O X 〰 2 years ago
Скажите, будто вы выделяете сходу несколько объектов? Я пробовала зажимать и контрол и шифт и виола, у меня не выделяются объекты(((
〰 P A R A D O X 〰 2 years ago
+Данил Фимушкин Спасибо огромное)
Данил Фимушкин 2 years ago
+nanaUMKA С зажатой клвишой шифт. Главно смотри чтоб стояли такие опции у стрелки:
Евгений Степанов 2 years ago
Узнал, что можно выделять сходу несколько слоёв в воркспейсе по средством зажатого контрола и включением функции автовыбора слоёв. Жизнь великолепна.
Alexander Mikolyk 2 years ago
Можно выяснить какая у вас гипотиза фотошопа?
Данил Фимушкин 2 years ago
+Alexander Mikolyk вот эта
Дмитрий Вакуленко 2 years ago
Спасибо! Подписываюсь без вопросов. Канал попросту красивый, уроки понятные, доступные и глядеть весьма любопытно. Спасибо еще один Данилу за красивые уроки! 
Данил Фимушкин 2 years ago
+Дмитрий ВакуленкоТеперь ты с нами! Ухху! Добро пожаловать ;)
VIPJackVIP V 2 years ago
Подскажите. Под какой движок вы адаптируете сверстаный макет.
Данил Фимушкин 2 years ago
+VIPJackVIP V зависит от задачки, обыкновенно под umi