Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

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

До 15 мая 2019 года все такие уроки будут бесплатными для всех зарегистрированных пользователей сайта. После этой даты каждый такой урок будет доступен за символическую плату, либо в формате подписки на опредленный срок. Например, вы сможете приобрести подписку на год и получить доступ ко всем премиум-урокам, которые выйдут за этот год.

Сложность: Средняя

Создаём форму заказа для интернет-магазина

В этом уроке Даниил Волосатов эксперт в области коммерческого веб дизайна покажет вам, как создать всплывающую форму с заказом товара для интернет-магазина. 

Форма визуально будет делиться на две части: в левой будет слайдер с фотографиями для отображения разных ракурсов товара, а с правой стороны расположиться вся нужная техническая информация о товаре и кнопка заказа.

Данный урок из нашего нового курса «Основы коммерческого веб-дизайна». В конце Даниил продемонстрирует работы студентов первого потока спустя 2 недели их обучения на курсе.
Ну что, готовы? Тогда смотрите, вдохновляйтесь и создавайте крутые дизайны!

Этот урок научит вас таким моментам:

  • Работа с колоночной сеткой и направляющими для выбора размера формы;
  • Использование векторных фигур для создания блоков и элементов;
  • Как эффективно работать с текстовыми слоями;
  • Важность выравнивания информации для её лёгкого восприятия;
  • Как графически расставлять акценты на выделенных деталях;
  • Работа с быстрыми направляющими;
  • Способы как быстрого так и точного отделения объектов от фона;
  • Применение и редактирование градиентов с помощью стилей слоя.

Проходите урок, экспериментируйте и учитесь создавать уникальный, креативный дизайн.
Только практика приведёт вас к достойным результатам и успеху!

Скачать архив с материалами к уроку

Комментарии 141

:beaming-face-with-smiling-eyes::smiling-face-with-heart-eyes::smiling-face-with-3-hearts::heart-with-arrow::heart-with-ribbon::red-heart::revolving-hearts::two-hearts::smiling-cat-face-with-heart-eyes::kissing-cat-face::cat-face-with-tears-of-joy::cat-face-with-wry-smile::crying-cat-face::grinning-cat-face-with-smiling-eyes::grinning-cat-face::pouting-cat-face::weary-cat-face::face-with-symbols-on-mouth::pouting-face::grinning-face::hugging-face::face-with-tongue::confused-face::face-with-rolling-eyes::woozy-face::smiling-face-with-sunglasses::winking-face::alien-monster::alien::angry-face-with-horns::angry-face::anguished-face::anxious-face-with-sweat::astonished-face::cold-face::confounded-face::cowboy-hat-face::crying-face::disappointed-face::dizzy-face::downcast-face-with-sweat::drooling-face::exploding-head::expressionless-face::face-blowing-a-kiss::face-savoring-food::face-screaming-in-fear::face-vomiting::face-with-hand-over-mouth::face-with-head-bandage::face-with-medical-mask::face-with-monocle::face-with-open-mouth::face-with-raised-eyebrow::face-with-steam-from-nose::face-with-tears-of-joy::face-with-thermometer::face-without-mouth::fearful-face::flushed-face::frowning-face-with-open-mouth::frowning-face::ghost::grimacing-face::grinning-face-with-big-eyes::grinning-face-with-smiling-eyes::grinning-face-with-sweat::grinning-squinting-face::hot-face::hushed-face::jack-o-lantern::kiss-mark::kissing-face-with-closed-eyes::kissing-face-with-smiling-eyes::kissing-face::loudly-crying-face::lying-face::money-mouth-face::nauseated-face::nerd-face::neutral-face::partying-face::pensive-face::persevering-face::pile-of-poo::pleading-face::relieved-face::robot-face::rolling-on-the-floor-laughing::shushing-face::skull::sleeping-face::sleepy-face::slightly-frowning-face::slightly-smiling-face::smiling-face-with-halo::smiling-face-with-horns::smiling-face-with-smiling-eyes::smiling-face::smirking-face::sneezing-face::squinting-face-with-tongue::star-struck::thinking-face::tired-face::unamused-face::upside-down-face::weary-face::winking-face-with-tongue::worried-face::zany-face::zipper-mouth-face::sad-but-relieved-face::thumbs-up::fire::backhand-index-pointing-down::backhand-index-pointing-left::backhand-index-pointing-right::backhand-index-pointing-up::brain::call-me-hand::clapping-hands::crossed-fingers::ear::eye::eyes::flexed-biceps::folded-hands::foot::footprints::hand-with-fingers-splayed::handshake::index-pointing-up::left-facing-fist::leg::love-you-gesture::nail-polish::nose::ok-hand::oncoming-fist::open-hands::palms-up-together::raised-back-of-hand::raised-fist::raised-hand::raising-hands::right-facing-fist::sign-of-the-horns::thumbs-down::tongue::victory-hand::vulcan-salute::waving-hand::writing-hand::man::adult::baby-angel::baby::bald::bearded-person::blond-haired-man::blond-haired-woman::boy::breast-feeding::bride-with-veil::bust-in-silhouette::busts-in-silhouette::child::clown-face::construction-worker::couple-with-heart::detective::elf::fairy::family-man-boy-boy::family-man-boy::family-man-girl-boy::family-man-girl-girl::family-man-girl::family-man-woman-boy-boy::family-man-woman-boy::family-man-woman-girl-boy::family-man-woman-girl-girl::family-man-woman-girl::family-woman-boy-boy::family-woman-boy::family-woman-girl-boy::family-woman-girl-girl::family-woman-girl::family::genie::girl::guard::kiss::mage::man-and-woman-holding-hands::man-artist::man-astronaut::man-bald::man-bowing::man-construction-worker::man-cook::man-curly-haired::man-detective::man-elf::man-facepalming::man-factory-worker::man-fairy::man-farmer::man-firefighter::man-frowning::man-genie::man-gesturing-no::man-gesturing-ok::man-getting-haircut::man-getting-massage::man-guard::man-health-worker::man-in-steamy-room::man-in-suit-levitating::man-in-tuxedo::man-judge::man-mage::man-mechanic::man-office-worker::man-pilot::man-police-officer::man-raising-hand::man-red-haired::man-scientist::man-shrugging::man-singer::man-student::man-superhero::man-supervillain::man-teacher::man-technologist::man-tipping-hand::man-vampire::man-wearing-turban::man-white-haired::man-with-chinese-cap::man-zombie::merman::merperson::mrs-claus::ogre::old-man::old-woman::older-adult::person-bowing::person-facepalming::person-frowning::person-gesturing-no::person-gesturing-ok::person-getting-haircut::person-getting-massage::person-in-steamy-room::person-pouting::person-raising-hand::person-shrugging::person-tipping-hand::person-wearing-turban::police-officer::pregnant-woman::prince::princess::santa-claus::selfie::speaking-head::superhero::supervillain::two-men-holding-hands::two-women-holding-hands::vampire::woman-artist::woman-astronaut::woman-bald::woman-bowing::woman-construction-worker::woman-cook::woman-curly-haired::woman-detective::woman-elf::woman-facepalming::woman-factory-worker::woman-fairy::woman-farmer::woman-firefighter::woman-frowning::woman-genie::woman-gesturing-no::woman-gesturing-ok::woman-getting-haircut::woman-getting-massage::woman-guard::woman-health-worker::woman-in-steamy-room::woman-judge::woman-mage::woman-mechanic::woman-office-worker::woman-pilot::woman-police-officer::woman-pouting::woman-raising-hand::woman-red-haired::woman-scientist::woman-shrugging::woman-singer::woman-student::woman-superhero::woman-teacher::woman-technologist::woman-tipping-hand::woman-vampire::woman-wearing-turban::woman-white-haired::woman-with-headscarf::woman-zombie::woman::koala::ant::baby-chick::badger::bat::bear-face::bird::blossom::blowfish::boar::bouquet::bug::butterfly::cactus::camel::cat-face::cat::cherry-blossom::chicken::chipmunk::christmas-tree::cloud-with-lightning-and-rain::cloud-with-lightning::cloud-with-rain::cloud-with-snow::cloud::collision::comet::cow-face::cow::crab::crescent-moon::cricket::crocodile::dashing-away::deciduous-tree::deer::dizzy::dog-face::dog::dolphin::dove::dragon-face::dragon::droplet::duck::eagle::elephant::evergreen-tree::ewe::fallen-leaf::first-quarter-moon-face::first-quarter-moon::fish::fog::four-leaf-clover::fox-face::frog-face::front-facing-baby-chick::full-moon-face::full-moon::giraffe::globe-showing-americas::globe-showing-asia-australia::globe-showing-europe-africa::glowing-star::goat::gorilla::hamster-face::hatching-chick::hear-no-evil-monkey::hedgehog::herb::hibiscus::high-voltage::hippopotamus::honeybee::horse-face::horse::kangaroo::lady-beetle::last-quarter-moon-face::last-quarter-moon::leaf-fluttering-in-wind::leopard::lion-face::lizard::llama::lobster::maple-leaf::microbe::monkey-face::monkey::mosquito::mouse-face::mouse::mushroom::new-moon-face::new-moon::octopus::owl::ox::palm-tree::panda-face::parrot::paw-prints::peacock::penguin::pig-face::pig-nose::pig::pine-decoration::poodle::rabbit-face::rabbit::raccoon::rainbow::ram::rat::rhinoceros::rooster::rose::rosette::sauropod::scorpion::see-no-evil-monkey::seedling::shamrock::shark::sheaf-of-rice::shrimp::snail::snake::snowflake::snowman-without-snow::snowman::sparkles::speak-no-evil-monkey::spider-web::spider::spiral-shell::spouting-whale::squid::star::sun-behind-cloud::sun-behind-large-cloud::sun-behind-rain-cloud::sun-behind-small-cloud::sun-with-face::sun::sunflower::swan::sweat-droplets::t-rex::tanabata-tree::tiger-face::tiger::tornado::tropical-fish::tulip::turkey::turtle::two-hump-camel::umbrella-with-rain-drops::umbrella::unicorn-face::waning-crescent-moon::waning-gibbous-moon::water-buffalo::water-wave::waxing-crescent-moon::waxing-gibbous-moon::whale::wilted-flower::wind-face::wolf-face::zebra::soccer-ball::1st-place-medal::2nd-place-medal::3rd-place-medal::admission-tickets::aerial-tramway::airplane-arrival::airplane-departure::airplane::ambulance::american-football::anchor::articulated-lorry::artist-palette::automobile::badminton::baseball::basketball::beach-with-umbrella::bicycle::bow-and-arrow::bowling::boxing-glove::building-construction::bullet-train::bus-stop::bus::camping::canoe::carousel-horse::castle::church::circus-tent::cityscape-at-dusk::cityscape::clapper-board::construction::convenience-store::cricket-game::curling-stone::delivery-truck::department-store::derelict-house::desert-island::desert::direct-hit::drum::ferris-wheel::ferry::field-hockey::fire-engine::firecracker::fireworks::fishing-pole::flag-in-hole::flying-disc::flying-saucer::foggy::fountain::fuel-pump::game-die::goal-net::guitar::headphone::helicopter::high-speed-train::horizontal-traffic-light::horse-racing::hospital::hotel::house-with-garden::house::houses::ice-hockey::ice-skate::japanese-castle::kaaba::kick-scooter::kimono::lacrosse::light-rail::locomotive::love-hotel::luggage::man-biking::man-bouncing-ball::man-cartwheeling::man-climbing::man-dancing::man-golfing::man-in-lotus-position::man-juggling::man-lifting-weights::man-mountain-biking::man-playing-handball::man-playing-water-polo::man-rowing-boat::man-running::man-surfing::man-swimming::man-walking::map-of-japan::martial-arts-uniform::men-with-bunny-ears::men-wrestling::metro::military-medal::milky-way::minibus::moai::monorail::moon-viewing-ceremony::mosque::motor-boat::motor-scooter::motorcycle::motorway::mount-fuji::mountain-cableway::mountain-railway::mountain::musical-keyboard::musical-score::national-park::night-with-stars::office-building::oncoming-automobile::oncoming-bus::oncoming-police-car::oncoming-taxi::passenger-ship::people-wrestling::performing-arts::person-biking::person-bouncing-ball::person-cartwheeling::person-climbing::person-fencing::person-golfing::person-in-bed-dark-skin-tone::person-in-lotus-position::person-juggling::person-lifting-weights::person-mountain-biking::person-playing-handball::person-playing-water-polo::person-rowing-boat::person-running::person-surfing::person-swimming::person-walking::ping-pong::police-car-light::police-car::pool-8-ball::post-office::racing-car::railway-car::railway-track::reminder-ribbon::rocket::roller-coaster::rugby-football::running-shirt::running-shoe::sailboat::satellite::saxophone::school::seat::shinto-shrine::ship::shooting-star::skateboard::skier::skis::sled::slot-machine::small-airplane::snow-capped-mountain::snowboarder::softball::sparkler::speedboat::sport-utility-vehicle::sports-medal::stadium::station::statue-of-liberty::sunrise-over-mountains::sunrise::sunset::suspension-railway::synagogue::taxi::tennis::tent::ticket::tokyo-tower::tractor::train::tram-car::tram::trolleybus::trophy::trumpet::umbrella-on-ground::vertical-traffic-light::video-game::violin::volcano::volleyball::wedding::woman-biking::woman-bouncing-ball::woman-cartwheeling::woman-climbing::woman-dancing::woman-golfing::woman-in-lotus-position::woman-juggling::woman-lifting-weights::woman-mountain-biking::woman-playing-handball::woman-playing-water-polo::woman-rowing-boat::woman-running::woman-surfing::woman-swimming::woman-walking::women-with-bunny-ears::women-wrestling::world-map::avocado::baby-bottle::bacon::bagel::baguette-bread::banana::beer-mug::bento-box::birthday-cake::bottle-with-popping-cork::bowl-with-spoon::bread::broccoli::burrito::candy::canned-food::carrot::cheese-wedge::cherries::chestnut::chocolate-bar::chopsticks::clinking-beer-mugs::clinking-glasses::cocktail-glass::coconut::cooked-rice::cookie::cooking::croissant::cucumber::cup-with-straw::cupcake::curry-rice::custard::cut-of-meat::dango::doughnut::dumpling::ear-of-corn::egg::eggplant::fish-cake-with-swirl::fork-and-knife-with-plate::fork-and-knife::fortune-cookie::french-fries::fried-shrimp::glass-of-milk::grapes::green-apple::green-salad::hamburger::honey-pot::hot-beverage::hot-dog::hot-pepper::ice-cream::kiwi-fruit::leafy-green::lemon::lollipop::mango::meat-on-bone::melon::moon-cake::oden::pancakes::peach::peanuts::pear::pie::pineapple::pizza::popcorn::pot-of-food::potato::poultry-leg::pretzel::red-apple::rice-ball::rice-cracker::roasted-sweet-potato::sake::salt::sandwich::shallow-pan-of-food::shaved-ice::shortcake::soft-ice-cream::spaghetti::spoon::steaming-bowl::strawberry::stuffed-flatbread::sushi::taco::takeout-box::tangerine::teacup-without-handle::tomato::tropical-drink::tumbler-glass::watermelon::wine-glass::abacus::alarm-clock::alembic::amphora::balance-scale::balloon::ballot-box-with-ballot::bank::bar-chart::barber-pole::basket::bathtub::battery::bed::bell::bellhop-bell::bikini::billed-cap::biohazard::black-nib::blue-book::bomb::bone::bookmark-tabs::bookmark::books::bricks::briefcase::broom::calendar::camera-with-flash::camera::candle::card-file-box::card-index-dividers::card-index::carp-streamer::chains::chart-decreasing::chart-increasing::chess-pawn::clamp::classical-building::clipboard::closed-book::closed-mailbox-with-raised-flag::closed-umbrella::clutch-bag::coat::coffin::compass::computer-disk::computer-mouse::confetti-ball::control-knobs::couch-and-lamp::crayon::credit-card::crossed-swords::crown::crystal-ball::curly-haired::dagger::desktop-computer::dna::dollar-banknote::door::dress::dvd::e-mail::electric-plug::envelope-with-arrow::envelope::euro-banknote::factory::fax-machine::file-cabinet::file-folder::film-frames::film-projector::fire-extinguisher::flashlight::floppy-disk::fountain-pen::framed-picture::funeral-urn::gear::gem-stone::glasses::gloves::goblin::goggles::graduation-cap::green-book::hammer-and-pick::hammer-and-wrench::hammer::handbag::high-heeled-shoe::hiking-boot::hole::hourglass-done::hourglass-not-done::inbox-tray::incoming-envelope::japanese-dolls::japanese-post-office::jeans::jigsaw::joystick::key::keyboard::kitchen-knife::lab-coat::label::laptop-computer::ledger::level-slider::light-bulb::link::linked-paperclips::lipstick::locked-with-key::locked-with-pen::locked::loudspeaker::love-letter::magnet::magnifying-glass-tilted-right::mans-shoe::mantelpiece-clock::memo::microphone::microscope::mobile-phone-with-arrow::mobile-phone::money-bag::money-with-wings::mouth::movie-camera::nazar-amulet::necktie::newspaper::notebook-with-decorative-cover::notebook::nut-and-bolt::oil-drum::old-key::open-book::open-file-folder::open-mailbox-with-lowered-flag::open-mailbox-with-raised-flag::optical-disk::orange-book::outbox-tray::package::page-facing-up::page-with-curl::pager::paintbrush::paperclip::party-popper::pen::pencil::person-in-bed::person-taking-bath::petri-dish::pick::pill::pistol::postal-horn::postbox::potable-water::pound-banknote::prayer-beads::printer::purse::pushpin::radio::radioactive::receipt::red-envelope::red-haired::red-paper-lantern::rescue-workers-helmet::ribbon::ring::roll-of-paper::rolled-up-newspaper::round-pushpin::safety-pin::satellite-antenna::scarf::school-backpack::scissors::scroll::shield::shopping-bags::shopping-cart::shower::skull-and-crossbones::soap::socks::spiral-calendar::spiral-notepad::sponge::squeeze-bottle::stopwatch::straight-ruler::studio-microphone::sunglasses::t-shirt::tear-off-calendar::teddy-bear::telephone-receiver::telephone::telescope::television::test-tube::thermometer::thread::timer-clock::toilet::toolbox::tooth::top-hat::trackball::triangular-ruler::unlocked::video-camera::videocassette::wastebasket::watch::wind-chime::womans-boot::womans-clothes::womans-flat-shoe::womans-hat::womans-sandal::wrapped-gift::wrench::yarn::yen-banknote::3d-material-drop-tool::3d-material-eyedropper-tool::add-anchor-point-tool::art-history-brush-tool::artboard-tool::b-w::background-eraser-tool::bloat-tool::blur-tool::brush-tool::clone-stamp-tool::color-replacement-tool::color-sampler-tool::content-aware-moove-tool::convert-point-tool::count-tool::crop-tool::custom-shape-tool::delete-anchor-point-tool::direct-selection-tool::dodge-tool::ellipse-tool::elliptical-marquee-tool::eraser-tool::eyedropper-tool::face-tool::foreground-color-mode::forward-warp-tool::frame-tool::freeform-pen-tool::freeze-mask-tool::gradient-tool::hand-tool::healing-brush::history-brush-tool::horisontal-type-mask-tool::horisontal-type-tool::inter-select::lasso-tool::layer-adjusments::layer-eye::layer-mask::layer-style::line-tool::link-tool::magic-wand-tool::magiv-eraser-tool::magnetic-lasso-tool::mixer-brush-tool::move-tool::new-group::new-layer::note-tool::opacity-pixels::orbit-the-3d-camera::paint-bucket-tool::pan-the-3d-camera::patch::path-selection-tool::pattern-stamp-tool::pen-tool::pencil-tool::perspective-crop-tool::polygon-tool::polygonal-lasso-tool::pucker-tool::push-left-tool::quick-mask-tool::quick-selection-tool::radial-gradient-tool::reconstruct-tool::rectangle-tool::rectangular-marquee-tool::red-eye-tool::roll-the-3d-camera::rotate-view-tool::rounded-rectangle-tool::ruler-tool::screen-mode::shape-mode::sharpen-tool::single-column-tool::single-row-tool::slice-select-tool::slice-tool::slide-the-3d-camera::smooth-tool::smudge-tool::sponge-tool::spot-healing-brush::thaw-mask-tool::trash::twirl-clockwise-tool::vertical-type-mask-tool::vertical-type-tool::w-b::zoom-the-3d-camera::zoom-tool::beaming-face-with-smiling-eyes::thumbs-up::man::koala::soccer-ball::avocado::abacus::3d-material-drop-tool:
Общий вес файлов не более 5Мб, не менее 450px по ширине и высоте
Ссылки внутри комментариев могут вести только на эти сайты

спасибо было интересно)

очень загружено и очень много цветов

Очень хорошо!

Хорошо! Если у текста в описании сделать больше межстрочный интервал, то вообще будет замечательно.

Спасибо за урок

Спасибо за урок!

Работа с курса.

Спасибо за урок

Хорошо проработали урок!

Спасибо за урок!))

Спасибо большое за урок)))

Спасибо вам, классно очень затягивает , вот и мой кроссовок))

Хорошее исполнение!

Almiz, Спасибо это мой первый опыт в веб дизайне.

Спасибо за урок и внятное объяснение.
Моя кросовка :)

Спасибо за урок!

Отлично сделали урок!

Спасибо, было интересно.

Спасибо за урок, интересно

Понравилась работа!

Almiz, Спасибо большое), есть недочёты, увидел после загрузки)

Наверх

Авторизация

Забыли?

Регистрация