Дополнения

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

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

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

Рисуем в Фотошоп набор web-элементов

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

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

Было решено создать урок именно по разработке дизайна кнопок, так как именно эту часть дизайна можно считать наиболее сложной и трудоемкой при проектировании пользовательских интерфейсов.

Далее вы можете увидеть конечный результат нашей работы:

А теперь давайте начнем непосредственно наш урок:

Шаг 1

Для начала создадим новый документ (Ctrl+N) с размерами 450 пикселей в ширину и 255 пикселей в высоту:

Шаг 2

Теперь выставьте в качестве основного цвета (Foreground) #d8dde3 и залейте им ваш холст (это можно сделать, например, нажав сочетание клавиш Alt+Backspace). Далее создадим небольшой шум на нашем холсте, для этого идем в Фильтр - Шум - Добавить шум (Filter - Noise - Add Noise), выставляем значение 2% и нажимаем ОК.

Шаг 3

Далее выбираем инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (M)), выставляем радиус размером 2 пикселя и рисуем фигуру, как показано на скриншоте. Назовите этот слой "Кнопка в нормальном состоянии" ("Normal Button"). Так же было бы неплохо, если бы вы поместили данный слой в отдельную группу.

Шаг 4

Кликните правой кнопкой мыши на слое, созданном в предыдущем шаге, выберите Параметры наложения (Blending Options) и примените Наложение градиента (Gradient overlay), предварительно выставив цвет переднего плана (Foreground Color) #009CFF, а цвет фона (background color) 1D87CA.

Шаг 5

В данном шаге нам нужно применить параметр Тень (drop shadow). Характеристики у него должны быть следующие:

  • Режим наложения (Blend mode): нормальный (Normal)
  • Цвет переднего плана (Foreground color): #979B9C
  • Непрозрачность (Opacity): 100%
  • Угол (angle): 90 градусов
  • Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
  • Расстояние (Distance): 1
  • Размах (Spread): 0
  • Размер (Size): 3

Шаг 6

Теперь выставим установки для Внутренней тени (Inner Shadow):

  • Режим наложения (Blend mode): нормальный (Normal)
  • Цвет переднего плана (Foreground color): #8DDOFB
  • Непрозрачность (Opacity): 100%
  • Угол (angle): 90 градусов
  • Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
  • Расстояние (Distance): 1
  • Стягивание (Choke): 0
  • Размер (Size): 0

Шаг 7

В данном шаге применим к нашей фигуре Обводку (stroke). Выберите для нее тип заливки (Fill Type) Градиент (Gradient) с цветами от #O44F7F к #045E98.

Должно получиться что-то наподобие вот этого на скриншоте ниже. Заметили светлую линию в верхней части? Это эффект от применения Внутренней тени (Inner Shadow).

Шаг 8

Выберите инструмент Текст (Horizontal Type Tool), напечатайте слово "Normal", используя для него цвет #O65O7F.

Шаг 9

Стоя на слое с текстом "Normal", кликните правой кнопкой мыши и выберите Параметры наложения (Blending Options). Затем примените Тень (Drop Shadow) со следующими характеристиками:

  • Режим наложения (Blend mode): нормальный (Normal)
  • Цвет переднего плана (Foreground color): #2BAAFA
  • Непрозрачность (Opacity): 100%
  • Угол (angle): 90 градусов
  • Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
  • Расстояние (Distance): 1
  • Размах (Spread): 0
  • Размер (Size): 0

Так будет выглядеть конечный результат для нашей "нормальной" кнопки:

Шаг 10

Теперь у нас стоит задача разработать дизайн кнопки в фокусе (Focused State). Хотя такую кнопку сделать проще, чем ту, что мы делали в предыдущих шагах.

Выбираем инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (M)), выставляем радиус размером 2 пикселя. Создаем новую фигуру, аналогичную предыдущей, и располагаем ее рядом с ней. Назовите вновь созданный слой "Кнопка в фокусе" (Focused button).

Шаг 11

Кликните правой кнопкой мыши на слое, созданном в предыдущем шаге, выберите Параметры наложения (Blending Options) и примените Наложение градиента (Gradient overlay), предварительно выставив Цвет переднего плана (Foreground Color) #009CFF, а цвет фона (background color) 1D87CA.

Шаг 12

Теперь применяем параметр Тень (drop shadow). Характеристики у него должны быть следующие:

  • Режим наложения (Blend mode): нормальный (Normal)
  • Цвет переднего плана (Foreground color): ##989D9D
  • Непрозрачность (Opacity): 100%
  • Угол (angle): 90 градусов
  • Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
  • Расстояние (Distance): 1
  • Размах (Spread): 0
  • Размер (Size): 3

Шаг 13

Теперь включим параметр Внутренняя тень (Inner Shadow):

  • Режим наложения (Blend mode): нормальный (Normal)
  • Цвет переднего плана (Foreground color): 8DD1FC
  • Непрозрачность (Opacity): 100%
  • Угол (angle): 90 градусов
  • Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
  • Расстояние (Distance): 1
  • Стягивание (Choke): 0
  • Размер (Size): 0

Шаг 14

Далее включаем параметр Внешнее свечение (Outer Glow):

  • Режим наложения (Blend mode): Наложение (Overlay)
  • Цвет переднего плана (Foreground color): #000000
  • Непрозрачность (Opacity): 100%
  • Метод (Technique): мягкий (softer)
  • Размах (Spread): 100%
  • Размер (Size): 3
  • Диапазон (Range): 50%

Шаг 15

В данном шаге нам нужно добавить Обводку (Stroke):

  • Размер (Size): 1
  • Расположение (Position): снаружи (outside)
  • Режим наложения (Blend mode): нормальный (normal)
  • Тип заливки (fill type): Градиент (Gradient)
  • Стиль градиента (style): линейный (linear)
  • Угол (angle): 90
  • Масштаб (Scale): 100%

Для градиента выберите цвета: основной цвет (Foreground) #OO9CFF и фоновый цвет (Background) #45E98.

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

Шаг 16

Напечатаем на ней слово "Focused".

После того как напечатали слово, добавим ему определенные детали.

Стоя на слое с текстом "Focused", кликните правой кнопкой мыши и выберите Параметры наложения (Blending Options). Затем примените параметр Тень (Drop Shadow) со следующими характеристиками:

  • Режим наложения (Blend mode): нормальный (Normal)
  • Цвет переднего плана (Foreground color): #2BAAFA
  • Непрозрачность (Opacity): 100%
  • Угол (angle): 90 градусов
  • Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
  • Расстояние (Distance): 1
  • Размах (Spread): 0
  • Размер (Size): 0

Вот что у нас получилось с кнопкой в состоянии фокуса, выглядит довольно аккуратно, не так ли?

Теперь нам необходимо создать третью кнопку, уже в нажатом состоянии, она будет называться ("Pressed" или "Clicked"). Но, что касается этой части работы - я хочу, чтобы вы сделали ее самостоятельно, опираясь на работу, проделанную в предыдущих шагах. Ведь если я сделаю всю работу за вас, вы ничему не научитесь, не так ли? На самом деле, это достаточно просто и я даже дам вам подсказку. Просто скопируйте вашу кнопку в нормальном состоянии ("Normal button") и в параметрах наложения (blending options) вам нужно будет удалить одно свойство, изменить и заменить параметры для двух других. При этом градиент должен остаться точно таким же.

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

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

Автор: Sanjay

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

: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 по ширине и высоте
Ссылки внутри комментариев могут вести только на эти сайты

Спасибо! Когда начинала урок, дала себе слово делать чётко по уроку. После 3-ей фигуры... понесло. Заметила, что немного увлеклась/отклонилась только уже в конце работы. =)

Спасибо, отличный урок!Пригодится точно.

Владимир, спасибо за перевод!

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

Как то так)) Спасибо за перевод!

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

ахахах... баттл?! Спасибо Ляльке за идею) было сложно, но интересно)

Мне кажется или подобный стиль оформления UI не актуален лет так 10?! Но, в любом случае, автору ОГРОМНОЕ спасибо за интересный опыт и полученные знания/навыки.

Хорошее исполнение урока!

Спасибо

Наверх

Авторизация

Забыли?

Регистрация