Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

Saimone

Помогите с теорией по нарезке макета новичку

Рекомендованные сообщения

Добрый день всем! Я с довольно элементарным вопросом, но я в замешательстве. На определенном этапе обучения  перешел с ознакомлением Photoshop для нарезки макета. Почти все нюансы и тонкости понял.  Но столкнулся с одной элементарщиной, которую не уловил из видеоуроков, а именно - как мне добыть фоновое изображение(к примеру, не повторяющиеся узоры, а фото... пейзаж) из макета, к примеру, из Header? Просто убрать все наложенные поверх слои и сделать экспорт изображения? Как-то этот нюанс я сам не понял до конца, а в видео, которые я смотрел, работа с фоном заключалась в вырезке как раз куска фона для цвета, или  с узором.  

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Just now, Saimone said:

Просто убрать все наложенные поверх слои и сделать экспорт изображения?

Да

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

  • Похожие публикации

    • Автор: Ivan_A
      Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара.
      Код карточки:
      HTML
      ——————————————————————————-
      CSS
      —————————————————
      У меня получается карточка.  (скриншот прикреплён)
      Хотелось бы узнать как мне сделать так, чтобы следующая шла с право от неё. Если просто скопировать HTML код, то она остаётся на месте.
      И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд.
      ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!

    • Автор: Ivan_A
      Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара.
      Код карточки:
      HTML                                                                                                                                                                     
      <div class="product-wrap">   <div class="product-item">     <img src="source/img/test.png">     <div class="product-buttons">       <a href="#" class="button">Купить</a>     </div>   </div>   <div class="product-title">     <a href="">Test</a>     <span class="product-price">₽ 100</span>   </div> </div> ——————————————————————————-
      CSS
      * {box-sizing: border-box;} .product-wrap {   position: absolute;    width: 300px;   margin: 0 auto;   background: white;   padding: 0 0 20px;   text-align: center;   font-size: 14px;    font-family: Lora;   text-transform: uppercase; } .product-item {   position: relative;   overflow: hidden; } .product-wrap img {   display: block;   width: 100%; } .product-buttons {   position: absolute;   left: 0;   top: 0;   width: 100%;   height: 100%;   background: rgba(0, 0, 0, .8);   opacity: 0;   transition: .3s ease-in-out; } .button {    text-decoration: none;   color: #c0a97a;   font-size: 12px;   width: 140px;   height: 40px;   line-height: 40px;   position: absolute;   top: 50%;    left: 50%;   border: 2px solid #c0a97a;   transform: translate(-50%, -50%) scale(0);   transition: .3s ease-in-out; } .button:before {   font-family: FontAwesome;   margin-right: 10px; } .product-item:hover .product-buttons {opacity: 1;} .product-item:hover .button {transform: translate(-50%, -50%) scale(1);} .button:hover {background: black;} .product-title {color: #5e5e5e;} .product-title a {   text-decoration: none;   color: #2e2e2e;   font-weight: 600;   margin: 15px 0 5px;   padding-bottom: 7px;   display: block;   position: relative;   transition: .3s ease-in-out; } .product-title a:after{       content: "";   position: absolute;   width: 40px;   height: 2px;   background: #2e2e2e;   left: 50%;   margin-left: -20px;   bottom: 0;   transition: .3s ease-in-out; } .product-title a:hover {color: #c0a97a;} .product-title:hover a:after {background: #c0a97a;} .product-price {   font-size: 20px;   color: #c0a97a;   font-weight: 700; } —————————————————
      У меня получается карточка.  (скриншот прикреплён)
      Хотелось бы узнать как мне сделать так, чтобы следующая шла с право от неё. Если просто скопировать HTML код, то она остаётся на месте.
      И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд.
      ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
    • Автор: мурамаса
      Добрый день, сверстал страницу с блоком новостей которые идут под меню колонкой, по одному блоку в ширину контейнера. В хроме все нормально и в файрфокс на моем ноутбуке с разрешением 1366х768 тоже, но с другого компа верстка сьезжает именно в firefox. Немного полазил в браузере и блок становится на место если убрать overflow: hidden, но тогда текст соотвественно вылезает за пределы блока. Скинул весь css на всякий случай.
      body { margin: 0; padding: 0; background: url(/img/casfon.jpg); } .frame { width: 1200px; background-color: white; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } .box { width: 1100px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } header { background: url(/img/casino.jpg) no-repeat center; height: 300px; } /* БЛОК НОВОСТЕЙ ГЛАВНОЙ СТРАНИЦЫ*/ .news { margin-left: 100px; margin-bottom: 100px; } .news-block { width: 800px; padding: 10px; margin: 0 0 40px 0; height: 310px; overflow: hidden; text-overflow: clip; font-size: 15px; text-align: justify; line-height: 1.3; } .news-block h2 { font-size: 22px; } .news-block h2 a { text-decoration: none; } .news-image { float: left; width: 300px; height: 280px; padding: 10px; } /* СТИЛИ ЦЕНТРАЛЬНОГО МЕНЮ */ .menu { float: left; border-bottom: solid red 2px; width: 100%; margin-bottom: 50px; } .menu li { list-style-type: none; font-size: 25px; float: left; margin: 0px 0 auto 50px; padding: 20px; } .menu li a { text-decoration: none; } .menu li:hover { background-color: red; } /* СТАТЬЯ КОНТЕНТ ОСНОВНОЙ */ .title { text-align: center; font-size: 25px; } .content { font-size: 18px; text-align: justify; float: left; margin: 30px auto 50px auto; } .content p { overflow: hidden; } .image { width: 330px; height: 300px; margin: 0 auto 20px 20px; clear: both; } .icon { width: 25px; height: 25px; float: left; margin-right: 25px; } /* СТИЛИ ДЛЯ ФОРАМТИРОВАНИЯ ТЕКСТА */ .red { color: red; } /* ПОДВАЛ */ footer { font-size: 13px; text-align: center; padding-top: 40px; display: block; height: 30px; margin-top: -60px; clear: both; border-top: 2px solid red; }  


  • Спрашивают сейчас

  • Пишут сейчас

    • Есть несколько вариантов которые позволяют развиваться профессионально: Ask friend for help. Опросить друзей знакомых на предмет предлагаемых услуг, заявить о себе. Выполнить несколько простых проектов для опыта/портфолио. Тем самым продвигать себя в качестве специалиста (сарафанное радио) Freelance. Вход сложный. Зато на мелочах можно поднять опыт за символическую стоимость. Потом развивать свой аккаунт, "обрастать" клиентами и поднимать уровень квалификации. Важно: почитайте пару гайдов как получить заказ новичку, как оформить профиль и прочие рекомендации. Сайты по теме: https://freelansim.ru https://www.fl.ru https://www.upwork.com — я бы выбрал этот Remote. Full-time. Ещё один хороший вариант найти работу — утроится в компанию работать удалённо. Без территориально ограничения. Компания может быть из СНГ, с юр. лицом. Заключаете договор и сотрудничаете на ставку. Part-time. Тоже самое что и предыдущий пункт но формат сотрудничества на правах почасовой работы. Office. Работа в офисе на позции Junior с перспективой роста. Хорошо подойдут галеры по типу ЕПАМ, Ciklum, LuxSoft, и тд. Денег мало (в начале), но компенсируется опытом. За 9-12 месяцев можете вырасти в Middle. Дальше плыть будет легче. Для поиска работы для Remote и Office вариантов можно использовать стандартные инструменты, на пример: djinni.co или linkedin.com. Рекомендации к заполнению профилю/CV Опишите всё что можете предложить заказчику. Расскажите о своих скилах, что непосредственно Вы делали выполняя работу над тем или иным проектом. Расскажите о своём опыте, даже если он не значительный. Если опыта совсем мало, инвестируйте месяц-два и выполните несколько простых задач, которые Вы сможете показать заказчику. И профиль и CV должно быть на английском языке, в первую очередь, и лишь копия русскоязычная (у меня такой нет, так как рынок предполагает знание английского языка с уровня pre-intermediate)
    • Сидеть дома и развиваться до уровня Senior годами без реальной работы?! 
    • Факт есть факт — специалистов как было мало так и осталось. Можно выбирать любую интересующую себя нишу и развиваться в ней до уровня Senior и иметь на себя спрос в последствии.
  • Лучшие авторы

  • Текущие цели пожертвований