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

3669 ratings | 251102 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: Дизайн сайта в Фотошопе

Alla Schriefer 4 months ago
Данил, благодарю за видео! Для новенького - в сам один.
Сергей Кондулуков 5 months ago
Даниил здрасти. Урок попросту превосходный. Но всё это еще проще мастерить в figma. Он еще проще Фотошопа к тому же даровой. Нет ли у вас подобного урока по дизайну в figma :-)
Сергей Кондулуков 5 months ago
Насчёт чека это дело вкуса. Колхоз дело добровольческое. Главное показан процесс поиска и это замечательно :-)
Веб-студия Profigroup 5 months ago
Спасибо создателю за нужный задание, мы тоже делаем psd макет по-другому макетpsdбетриукс
Александр Козлов 6 months ago
классно, в особенности для 2014 года, даже в 2018 смотрится животрепещуще и даже свежо по дизайну
Roman K 7 months ago
Бесплатная доствка??))))) 18:40 возле)
stanislav s. 8 months ago
Если хватать образец с Фимушкина, можно было бы попросту отрисовывать в Фотошопе кисточкой. ) Полезный задание. Спасибо.
GREY Bardak 9 months ago
Супер благодарю)))для начинающего весьма нужный видос)))
застрелить или застрелиться 11 months ago
Посмотрел аш самому захотелось , что-то масштабное сделать для себя
DANCE WITH THE DEVIL 11 months ago
Как вы направляюще включаете?
Дорош Иван 11 months ago
Возможно и не необходимо, однако скажу. По моему воззрению в чеке не хватает кнопки Удалить тот либо другой продукт. Это полностью нужная предмет. А у человека какой делал этот штамп руки вырастают то из правильного места)
Данил Фимушкин 11 months ago
аххаа благодарю)
Бизнес Нет 11 months ago
Тык тык тык)))
You Life 1 year ago
Борщьъ
You Life 1 year ago
Можно прибрать не сетку а эти розовые палки😀😀😀😁!
HORO HORO 1 year ago
Возможно ли получать либо отыскать для себя метод заработать с помощью сотворения дизайна для веб-сайта? Для тех кто будут в предстоящем трудиться с версткой.
Данил Фимушкин 11 months ago
непонятен проблема - на дизайне получать можно, на верстке можно
николай юдин 1 year ago
опа кокраз мне нужно сделать дизайн суши для мобилы благодарю))
Данил Фимушкин 11 months ago
изволь)
Роман Рюмин 1 year ago
Данил, какую сетку нужно использовать для расширения 1366px?
Екатерина Мануилова 1 year ago
Не уверена на счёт корзины на главный странички, и принципа, что оператор перезванивает. Многие люд не будут себя напрягать набором предстоящей инфы. Поэтому вправду оператору придётся узнавать все без помощи других.а жто уже прирастит число ошибок со стороны персонала (хреново услышал и тд), ну-ка и пора работы с 1-им клиентом очень возрастает. То кушать, будет появляться или заминка по подтверждению заказа, или нужда наращивать штат операторов
Start IQ project 1 year ago
эх мне бы такового друга ;)
Саумасшедший 1 year ago
С меня лайк и подписка за манера разъяснения !А какой размер изображения экспонировать ?
Данил Фимушкин 1 year ago
зависит от макета какой ты хочешь сделать
Лиля Кунафина 1 year ago
Только поглядела видео, весьма понравилось,благодарю!
Данил Фимушкин 1 year ago
изволь;)
chuvachok 1 year ago
Ужасный веб-сайт
Данил Фимушкин 1 year ago
целый осадок
Андрей Великсар 1 year ago
было бы классно еще созидать панель при нажатии кнопок,либо чаще бы озвучивал деяния. Так и жаркие кнопки все обучать сходу будут)
Alex Ushakou 1 year ago
Сфера Сергеевна 1 year ago
Очень прекрасно
Адилет Бердибеков 1 year ago
Каким образом выделяют элементы ?
Анна Пименова 1 year ago
Благодарю за хорошую подачу инфы и позитив) У меня проблема по фотошопу: на 37:33 минутке вы выделяете рамкой карточки продуктов, которая исчезает посл того будто вы отпускаете кнопку мыши. Подскажите будто можно пользоваться этой функцией. У меня сходу начинает подвигаться объект , однако рамка вовек не возникает. Заранее благодарю)
Tigran Yavroyan 1 year ago
Нет слов. ПОДПИСКА!!!
Данил Фимушкин 1 year ago
😍
Владимир Владимирович 1 year ago
Данил благодарю за уроки. А заказчик принял дизайн? Или поточнее каким веб-сайт стал потом утверждения заказчиком? Может кушать ссылка на веб-сайт с этим дизайном?
исрс исв 1 year ago
Помогите изволь у меня в клеточке пласты любой слой увеличен , будто их сделать будто у тебя
исрс исв 1 year ago
А ты где этому обучался ?
исрс исв 1 year ago
Данил Фимушкин а можешь произнести какое конкретно ну-ка к примеру дизайнер интерфейсов интернет разработчик , попросту я желаю стать дизайнером интерфейсов и желаю выяснить где лучше
Данил Фимушкин 1 year ago
В студии, на фрилансе, в вебе, у людей. ну-ка и в институте еще)
Владислав Ткачук 2 years ago
Здравствуйте, у меня нету функции, Save for Web. что мне мастерить?
Данил Фимушкин 2 years ago
Если ты используешь последнюю версию фотошопа, то Save for Web находится здесь:
biimer 2 years ago
Ага чек отыскал в вебе. А что ты будешь мастерить если клиент закажет 12 позиций а?? Чек сам то не растянется
Nikolay Demidenko 1 year ago
можно сделать это с помощью команды html textarea. будет прокрутка
biimer 2 years ago
+Alexandr Original Зачем ж этак грубо?
Alexandr Original 2 years ago
прокрутку можно сделать в верстке, отыскивай не стандартные пути ху.ь ты
Александр Братенков 2 years ago
Добрый денек. Полагаю, что немало кнопок заказать и оформить заказ в корзине могут сшибить с толку юзера. Я бы предложил отрешиться от представляться от огромного количества кнопок Заказать на товаре и бросить лишь плюс и минус. При нажатии на плюс, раскрывается корзинка в которой содержится продукт, в выбраном количестве, если не одинешенек продукт не выбнан, чек-корзинка не визуализирована. Таким образом юзабилити веб-сайта будет усовершенствовано.
Медет Бергазденов 2 years ago
Данил все класно, понятно, информативно, мольба подскажи будто ты сделал себя на фоне видео
TyLLIoNKa 2 years ago
Есть готовый итог?
Эльнар Шайдаев 2 years ago
Дружище, ты лучше всех объясняешь! И у меня проблема, желаю сделать веб лавка, я новенький в этом, однако и не чайник. Какую CMS мне посоветуешь???
StaSony4 67 2 years ago
Подскажите изволь, остался у вас исходник вашего тестового веб-сайта?)
Милан Иванов 2 years ago
Сякэ, Мякэ😙
WebDesign Guru 2 years ago
Хорошо рассказываешь. Интересная подача инфы
Данил Фимушкин 2 years ago
благодарю!
Johnny Gettym 2 years ago
В каком формате сохраняется макет?
Kinab Channel 2 years ago
Спасибо!
Olya Мelnikovich 2 years ago
а какие характеристики должны быть у лендинга? я про ширину и высоту. одна страничка к примеру во полный экран. и ещё, будто вы настроили фотошоп, чтоб при перемещении объектов у вас появлялись направляющие ка на 20:48 ???
Jessy Dadd 2 years ago
дизайн кислый по факту хотелось бы вообщем будто с 0 до шаба на дле положим
Ясная Сонце 2 years ago
Приииииииивееееееет!! по иде кнопку заказать необходимо мастерить смарт-объектом , а позже копировать я этак понимаю? вроде этак научилась))
Din Winchester 2 years ago
ну-ка а под Full HD подгонять макет будто?
GhostRealms 2 years ago
подскажите в какой программке верстать это веб лавка, с фишками типа подсчет малого заказа(сколько еще не хвататет) ,добавлением продукта в корзину, вылезанием чека и т.д. ? Есть ли продолжение этого урока (веб-сайта) уже по самому созданию веб-магазина?
Marola Braineater 2 years ago
javascript html css
HiStO rIaN 2 years ago
с помощью PHP точно знаю) Но я далековато не профи)))
Вязание c Надеждой 2 years ago
БорщЬЬЬЬЬ, насмешил. ( верно строчить борщ)
SiBeR Cnannale 1 year ago
Adobe Photoshop CC 2018 с ключом активации
Paco Official 1 year ago
это не единственная промах) и этак у многих дизайнеров. конечно и дизайн таковой для себя если честно, однако думаю он щас лучше делает ведь этому видосу уже практически 3 года
Данил Фимушкин 2 years ago
я знаю;)
Блог фрилансера. Веб-дизайн. 2 years ago
Спасибо Данил
anna laki 2 years ago
мне безотлагательно необходимо знать какие характеристики задаёте (ширина вышина странички, на которой делаете логотип шапку и т.д.)
[Night cast] EeOneLix-Gaming 2 years ago
а будто распялить сетку , я рамкой питаюсь однако растягиваеться лишь поле, а полоси остаються
Jeremy Harris 2 years ago
будто прирастить размер холста?
H1ppy Channel 2 years ago
Данил, скажите, изволь, будто именуются такие штуки, розового цвета, которые центруют, прилипают к другим объектам. Делают, этак произнести, симетрию. Просто у меня фотошопе их нету (российский стиль), будто можно их включить? Заранее благодарю за ответ! И благодарю за задание!
Yulia Grebenwickowa 2 years ago
они вродь с версии Adobe Photoshop CC появились
Stas Invest 2 years ago
слушай а для вкладывательных проектов умеешь строчить ???
RepO MaN 2 years ago
А будто сделать адаптивный дизайн в фотошопе? Или это делается уже программером? И будто учесть анимацию? То кушать сделать окно, которое будет позже анимационным?
RepO MaN 2 years ago
+Олег Карелин благодарю)
Олег Карелин 2 years ago
Чтобы все это сделать с годик поучиться нужно) Да, на программера, верстальщика. А при разработке макета нужно это все лишь содержать в уме и хотя бы примерно осознавать будто это делается в html css и js.
nikarm22 2 years ago
это делает front-end разработчик
html css 2 years ago
это уже web-разработчик пишет !
Александр Бабушкин 2 years ago
Гуд джоб! Добавлено чрез 13 мин просмотра: Здесь творится мистика!
Evzheniq 2 years ago
+
Evzheniq 2 years ago
Можно Вам выслать собственный макет поглядеть?
Данил Фимушкин 2 years ago
благодарю)
MrGameTVCity 2 years ago
А будто ты себя добавил, хромакей?
Любовь Пожидаева 6 months ago
+[Night cast] EeOneLix-Gaming а что это за полосы розовые типов направляющих будто их сделать?
[Night cast] EeOneLix-Gaming 2 years ago
ставиш на задний план хромокей, потов в афтер ефекце удаляеш его.
паша гете 2 years ago
конечно
паша гете 2 years ago
конечно
паша гете 2 years ago
конечно
Denis Yaskevich 2 years ago
Можно ссылку на уже готовый свёрстанный веб-сайт?
Mackay Bravo 2 years ago
а мне нравится веб-сайт, какой 1-ый по сео. все пять
Данил Фимушкин 2 years ago
+Mackay Bravo ))
Mirror's Mix 2 years ago
Маяк
Данил Фимушкин 2 years ago
+Mirror's Mix )) что ты имеешь ввиду?)
Искандер Габидуллин 2 years ago
Боршь)))) круто))) насмешил)))5+
Arescon Scrall 2 years ago
деревенский борщь))
Данил Фимушкин 2 years ago
+Искандер Габидуллин ))) стыдоба
Imp 2 years ago
Видео нереально глядеть, повсевременно отвлекаешься на суши )), я покамест смотрел, раза 3 бегал к холодильнику.
Александр Ланцов 1 year ago
И такое бывает О_о..
Данил Фимушкин 2 years ago
+wexerrexer хахаха! Хорошо что я не сексшоп делал)
николай лещев 2 years ago
Спасибо Данила. Это не попросту видео, а реальный курс по составлению проекта веб-сайта. Здорово. Теория и сходу практика - это то, что и необходимо, для того чтоб сходу ввести. И уже не стращает объём инфы.
Данил Фимушкин 2 years ago
+николай лещев большео благодарю)
Нэнси Каменецкая 2 years ago
Отлично! Спасибо большущее, когда видишь сам процесс, все в голове на свои места встает.
Atom 2 years ago
Как включить эти полосы, когда он куда то перемещает?Sorry я новенький
Алексей Шарков 2 years ago
На голодный желудок не глядеть !!!!
застрелить или застрелиться 11 months ago
Start IQ project я вообщем ничего не ем лишь атмосфера и солнечные лучи
Start IQ project 1 year ago
Шарков Алексей я не ем суши, потому все ок!
Михаил Гусев 1 year ago
Это точно;)
BronnikShow 2 years ago
Очень, весьма круто и весьма отменно !!!!
Koloboc Sam 2 years ago
Спасибо за видео, понравилось. Есть два комментария не в тему (либо практически). 1. Никогда ничего не куплю в инет-магазине, если мне перезвонит кто-то из этого магазина для доказательства\уточнения заказа.! (если там спрашивают номер телефона и больше ничего, то в 90% случаев - перезвонят). Есть несколько инет-магазинов где я ни разу за несколько лет не общался по телефону с персоналом!. Разве не для этого они есть? 2. Была такая ситуация с иной крайностью, когда упрямо не желали оформить заказ по телефону все мне пробовали разъяснить будто это сделать чрез веб. тоже абсурд! Бизнес по русски одним словом.
Dezmand33RUS 7 months ago
Извините, однако вы аутист
Канал Гангстера Фредди 2 years ago
Данил супер молодчина весьма посодействовал моему брату и мне благодарю для тебя, желаю для тебя фурроров в жизни
Максим Зуев 2 years ago
Подскажите будто включить (табло с пикселями ) у курсора мышки.
isaevmax1 2 years ago
а сколько Данил ты зарабатываешь этими познаниями
Руслан Джуманиязов 2 years ago
Данил, благодарю огромное!!! Очень понравилось будто ты объясняешь! Все весьма понятно, с примерами. Мне весьма понравилось! Желаю фурроров, в последующих роликах!
Данил Фимушкин 2 years ago
+Руслан Джуманиязов (RusTIK777) Спасибо!
Вера Петрова 2 years ago
будто именуются прошлые видео, о которых вы гласили? (о разработке зрительного вида )
Вера Петрова 2 years ago
+Данил Фимушкин будто конечно)) благодарю:)
Данил Фимушкин 2 years ago
+Вера Петрова это?
Catherine 2 years ago
*Очень мне посодействовал, благодарю огромное!*
Arazetaritatara 2 years ago
Спасибо за задание, Данил! Вы произнесли, что сделаете макет больше, под Full HD мониторы. Напишите, изволь, будто это все-таки можно сделать?
Irina Pavlova 3 years ago
Почему бы Add Block не поставить на браузер?
КРОКОДОЛУС 3 years ago
На 4 минутке просмотра. ШИКАРНО! Очень доходчиво объясняете, и весьма любопытно следить за хорошо поставленной идеей в видео. Я готов издержать на это час. Большое благодарю. С меня подписка.
Капитан Америка 3 years ago
Можете кто дать подсказку где включить показ отступов в пикселях и все направляющие (фиолетовые,возникают если подвигать блок)
Alina 3 years ago
а растолкуйте изволь будто верстальщику разрезать макет?
max Relax 3 years ago
Прикольное видео-вызнал кое что увлекательное про шоп, однако вот обучаться бы не стал ВЕБ дизайну у этого дизайнера!!не оцениваю дизайн-в этом я не спец. Теперь минусы(со стороны верстальщика). У вас будто и у большинства дизайнеров с имитированная ситуация в дизайне не настоящая, а безупречная для подачи дизайна. А конкретно(то что увидел, умышленно не колупаясь и соотв. Не верстая с шаблона): заглавие бывает и весьма длинноватое продукта(будто вы пробовали сделать, а позже удалили) и уже глядеться по другому будет; состав суши тоже оч различный бывает, соответственно и длину карточки продукта необходимо очень прирастить, что бы универсально было, либо что бы порекомендовал состав выплеснуть в попап либо в последнем случае упрятать под кнопкой состав.; из-за состава, будто на данный момент карточек продукта меньше расположиться на страничку, и это весьма нехорошо, если продукта немало.Чек на экране слева по этой же причине не к чему и хоть какой рекламщик ноомпльный произнесет, что не стоит клиенту корзиной на очах мозолить-это уменьшает посредственный чек, этак будто клиент лицезреет сколько уже купил и сумму. Телефон мальнький, что Ооченьплохо-он должее быть всюду и приметен ибо если я нахожусь где то понизу и надоело чрез дудки заказывать-должна возможность сходу набрать либо я уйду. Телефонов несколько указывают, а по концепции этого дизайна он на данный момент в полосы с лого. Опять же где о нас, контакты, это для сео поважнее, чем призывыв на главной. Разделов тоже дудки, ибо практически хоть какой спец инет лавка зарабатывает сверх барыш на напитках и спец предложениях, а тут даже категорий дудки не говоря уже о места для акций. И проработав со многими дизайнерами в различных компаниях этак вам скажу дизацнер со познанием фотошопа и с необычным мышлением не платят немало. А вот со познанием поведенческой психологии, простым маркетингом и исходным сео уже совершенно другие зп конечно и трудиться с ними приятнее, ибо проффесионалы и не переделывают дизай по 10 один, поэтому что будто тут нарисовали будто захотелось, а не будто необходимо. Сорри за ошибки-с мобилки в дороге пишу
Елизавета Нович 1 year ago
Спасибо за Ваш комментарий. Согласна, если веб-сайт делают несколько человек, надлежит быть взаимодействие меж ними. Я полиграфист, однако впритирку общаюсь с цехом производства. Думаю с веб-сайтами этак же. Нельзя мастерить по принципу Бумага все стерпит. Думаю в уроке показаны лишь главные принципы, а не управление к действию.
max Relax 3 years ago
+Алексей Ил согласен, тоже для себя кое что вынес будто от дизайнера верстальщику )
Алексей Ил 3 years ago
+max Relax меня тоже, будто верстальщика, смутили многие моменты. И дизайн на четыре с минусом вышел. Но подача материала отменная, поглядел с энтузиазмом.
Khodov ART 3 years ago
Отличное видео, подскажите будто переверстывать под full hd экраны.
Marika Tarasova 3 years ago
вы собрали все мои представления о разработке макета веб-сайта в кучу, благодарю большущее;) Подписываюсь
Дон Вономис 3 years ago
Какой фотошоп скачать,чтоб было такое же меню по виду,а то у меня фотошоп cs 2014 там все по другому,попросту ни разу в фотошопе не воспользовался
Eddy 3 years ago
У меня попросту слов дудки, Вы молодчина. Позитивный, грамотная выговор и т.д.
Евгений Борисов 3 years ago
Данил, а если не трудно, выложите, изволь, логотип, какой Вы используете в данном макете.
Эдвард Яковлев 3 years ago
Просто супер, пять объясняешь и наглядно показываешь.
Юрий Витальевич 3 years ago
Спасибо большущее за достойные внимания видеоуроки и общение!
Seel Neou 3 years ago
То, что нужно! В ютюбе груда видео на тему дизайна, а по содержанию, которое устраивает меня - лишь тут! У вас, кроме высочайших дизайнерских способностей, хороший подход к изложению мыслей в видео.
Данил Фимушкин 3 years ago
+Evgen Gapa благодарю, я рад, что приглянулись мои видео)
Екатерина Поскребаева 3 years ago
Ты потрясающий!
Данил Фимушкин 3 years ago
+Екатерина Поскребаева Спасибо :)
Vladislav Egorov 3 years ago
Смотрел задание, заказал роллов
Камиль Корнилков 3 years ago
Как именуется данная программка для фотошопа?
Данил Фимушкин 3 years ago
+Камиль Корнилков не сообразил проблема
Artyom Neurofunk 3 years ago
борщЬ хаха
Какойто Вася 3 years ago
Всё классно!!! однако фотолия ГАВНО
Данил Фимушкин 3 years ago
+Какойто Вася на вкус и краска, кому-то она нравится) Теперь Фотолия доля Adobe, этак что, надеюсь, станет лучше)
Ivan Bazhenov 3 years ago
Данил благодарю круто немало вызнал благодарю!!
Данил Фимушкин 3 years ago
+Ivan Bazhenov благодарю за просмотр)
nodpc 3 years ago
Вот сколько мозгокода для верстальщика
Иван Погодин 3 years ago
Огромное благодарю за задание и наитие.
Данил Фимушкин 3 years ago
+Иван Погодин вечно изволь)
Who is like God? 3 years ago
А будто из этого дизайн сделать готовый веб-сайт
Who is like God? 3 years ago
+Данил Фимушкин ок подружусь
Данил Фимушкин 3 years ago
можешь и сам, если код знаешь :) либо с Adobe Muse подружись.
Who is like God? 3 years ago
+Данил Фимушкин а самому ни будто?
Данил Фимушкин 3 years ago
+Grod дать верстальщику, он все далее сделает)
Liza Mariya 3 years ago
какая ширина макета?
Ирвин Уэлш 3 years ago
+Liza Mariya 960px
Konstantin. R 3 years ago
весьма увлекательный задание,подписываюсь на другие.весьма приятно глядеть этак же на видео вас,будто это делаете что вас тоже видать,и в какой программке,comtasia?.может кушать видео задание у вас ?
xtc339 3 years ago
Данил, здрасти! Не могли бы Вы обрисовать жаркие кнопки либо их композиции, которые используете в данном видео? Просто Вы все этак стремительно делаете, с легкостью манипулируете объектами. В частности весьма любопытно, будто в конце видео Вы все этак стремительно соединили в группы. Спасибо =)
Максим Шишкин 3 years ago
Приятный задание, благодарю!