Jump to content
  • 0

Помогите вырезать значок из макета


aaron
 Share

Question

Есть такой макет - https://www.dropbox....9ksny/index.psd

Замучился вырезать значок (в виде кружков) в навигационном меню. Подскажите, как мне его вырезать правильно?

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

И точно также дело обстоит с центральной картинкой.

До этого в Photoshop с таким не сталкивался, не знаю, что делать.

Edited by aaron
Link to comment
Share on other sites

Recommended Posts

  • 0

да! )) а как сделал, что получилось? фон прозрачный, png?

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

Link to comment
Share on other sites

  • 0

Так а что инструмент "раскройка" не работает, или ты ей не пользуешься?

Кто? Я? Нет, не пользуюсь, ибо как правило оно абсолютно не соответствует тому как нужно это мне

да! )) а как сделал, что получилось? фон прозрачный, png?

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

Ну я же показал, что удалил рамки от slices, то есть оно "стало одним куском", и все собственно, взял и сохранил.

Прозрачный фон, да png, там, в данном случае, только самый нижний слой background отключить и все

Про рамки не понял...

Link to comment
Share on other sites

  • 0

да! )) а как сделал, что получилось? фон прозрачный, png?

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

Вот что получилось. Одна картинка и размер с макета (но там просто фон копируется)

Да, сможешь тот исходник сохранить в .png

Edited by dev4go
Link to comment
Share on other sites

  • 0

Спасибо за видео! Все очень понятно и подробно! Благодарю! ))))

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

Link to comment
Share on other sites

  • 0

Подскажи, а что за прога у тебя в Total стоит? С помощью которой ты просматривал готовый результат после нарезки. Очень эффектоно и удобно! Или может это специальная сборка Total такая?

Link to comment
Share on other sites

  • 0

Подскажите - не могу понять.

Имеется такой код (упростил для эксперимента, чтобы понять) - http://jsfiddle.net/GVHSoDHREgZotPCz8CJv/jBKkB/

В результате получается такая картина - http://itmages.ru/image/view/946069/d41d8cd9

Не могу понять, откуда появляется нижний выглядывающий край блока, ниже изображения. Пропадает он, только если явно задать высоту блока, в которое вставлено изображение.

Link to comment
Share on other sites

  • 0

Зачем вы Img запихиваете в div?

Судя по css, div c id="wrap" вам тоже не нужен.

Вместо background-color можно писать просто background: #000

Высота #head должа быть равна 775 - высота изображения.

Edited by ILL-JAH
Link to comment
Share on other sites

  • 0

Подскажите - не могу понять.

Имеется такой код (упростил для эксперимента, чтобы понять) - http://jsfiddle.net/...tPCz8CJv/jBKkB/

В результате получается такая картина - http://itmages.ru/im...946069/d41d8cd9

Не могу понять, откуда появляется нижний выглядывающий край блока, ниже изображения. Пропадает он, только если явно задать высоту блока, в которое вставлено изображение.

задай для img display:block; и не будет отступа http://jsfiddle.net/alexriz/jBKkB/1/

Link to comment
Share on other sites

  • 0
а почему так?

Ну потому, что inline-block ведет себя, грубо говоря, как буква в тексте. А у букв есть базовая линия, по которой выстраиваются буквы по-горизонтали, но у некоторых букв есть еще "хвостики" которые рисуются ниже базовой линии, вот именно для этого и отводится отступ.

Link to comment
Share on other sites

  • 0
а почему так?

Ну потому, что inline-block ведет себя, грубо говоря, как буква в тексте. А у букв есть базовая линия, по которой выстраиваются буквы по-горизонтали, но у некоторых букв есть еще "хвостики" которые рисуются ниже базовой линии, вот именно для этого и отводится отступ.

вот теперь понятно. благодарю!

а подскажите еще. при сбросе стилей если писать (у меня так получается):

*{margin:0; padding:0;}

то для списков отступы и поля не сбрасываются?

мне пришлось специально для них писать:

ol,ul{margin:0; padding:0;}

Это всегда так? Опыт у меня совсем маленький верстки, можно сказать - нету его почти. Столкнулся в самостоятельной работе с таким.

Может, чего не заметил в коде своем - не спорю. Но получилось именно так.

Edited by aaron
Link to comment
Share on other sites

  • 0

вообще * это универсальный селектор, то есть и у списков тоже отступы должны были сброситься, если нет, то вероятнее всего они определены где-то ниже.

А вообще сбросы => линейка + пальцы = ХРРРЯЯСЬ!!!! по пальцам :)

Зачем сначала сбрасывать, то что добрые дяди\тети разработчики тебе дали, а потом брать и определять по новой? задумайтесь ;)

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

  • Like 1
Link to comment
Share on other sites

  • 0

логично. у меня подспудно такая мысль возникала, когда писал правила. что дурную работу делаю. но отбросил ее по принципу - потом разберусь, я еще новичок :mellow:

а почему так?

Ну потому, что inline-block ведет себя, грубо говоря, как буква в тексте. А у букв есть базовая линия, по которой выстраиваются буквы по-горизонтали, но у некоторых букв есть еще "хвостики" которые рисуются ниже базовой линии, вот именно для этого и отводится отступ.

точно самое, и еще с картинками даже - http://www.xiper.net...-the-block.html

Но там приводится еще способ через vertical-align:top/middle/bottom.

Еще про два других - не понял я их.

Только я сейчас узнал, что если элементу задать float:left/right, то он становиться блочным элементом. )

Получается, если img задать правило float, то картинка из строчно-блочного элемента (inline-block) станет блочным элементом (block) и у нее также пропадет этот отступ снизу?

Сейчас проверил. В консоли Хрома для картинки показано - display: inline-block;

Значит, это вранье, что оно становится блочным?

Edited by aaron
Link to comment
Share on other sites

  • 0

Сейчас проверил. В консоли Хрома для картинки показано - display: inline-block;

Значит, это вранье, что оно становится блочным?

Нет, не вранье, действительно float:left|right; делают элемент блочным. Просто, наверное, не туда смотрел, нужно в "Computed Style" смотреть

Link to comment
Share on other sites

  • 0

Подскажите.

Имеется такой код - http://jsfiddle.net/...tPCz8CJv/nPk7P/

В результате получается так - http://itmages.ru/im...950657/d41d8cd9

Пробовал отключить нестандартный шрифт (думал, дело в нем). Но все равно получается вот так:

http://itmages.ru/im...950653/d41d8cd9

(Впрочем, и на jsFiddle тот же результат получается).

Подскажите, в чем причина? В голову не приходит ничего вообще по этому поводу.

Почему шрифт вылезает? Ведь он должен лежать строго в границах блока div#logo, а тот в свою очередь - в границах блока div#slider. Но в итоге div#logo лежит строго внутри div#slider, а вот текст вылазит даже из блока div#slider?

Кстати, попутно хочу спросить. Я создал блок div#logo, чтобы абсолютно спозиционировать его, как на макете:

https://www.dropbox....9ksny/index.psd

Я правильно поступил - в данном случае лучше всего размещать этот логотип с помощью позиционирования? Или более правильным будет в помощью margin/padding?

Заодно хочу спросить. Правильно ли я свертал навигационную панель? Вроде все работает, но у меня сомнения есть, что все верно мною сделано.

Edited by aaron
Link to comment
Share on other sites

  • 0

Всё из-за высоты строки. Ты увеличил шрифт, но высота строки осталась прежней, поэтому буквы торчат сверху. Когда меняешь размер шрифта не забывай и про line-height.

Высоту строки можно установить прямо в свойстве font:

font: 55px/1 'as_black_swanregular';

Цифра после слеша и есть высота строки. Обрати внимание, что она указывается без единиц измерения. 1 — это высота, равная размеру шрифта,1.5 — полтора размера шрифта и т.д.

Link to comment
Share on other sites

  • 0
Когда меняешь размер шрифта не забывай и про line-height.

Спасибо за подробный ответ. Про это дело не знал совсем! Просто менял размер шрифта бездумно и с таким столкнулся впервые.

Подскажите еще такой момент. Вопрос новичка, конечно. Хочу прояснить для себя.

Когда открываешь в Photoshop макет и в нем есть нестандартные шрифты. Со стандартными все просто - выбираешь инструмент "Горизонтальный текст" и видишь в рабочей области все параметры шрифта.

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

Вопрос - имеет ли смысл подключать необходимые нестандартные шрифты в Photoshop для работы с ними в макете? Или можно как-то обойтись без этого. Опыта нет, поэтому такой вопрос.

P.S.

Сейчас попробовал - получилось! ))) Вот только у меня все не получается запомнить универсальное правило для шрифта font - там же обязательна строгая последовательность значений. Пишу по старинке - отдельными правилами для каждого свойства. )))

Link to comment
Share on other sites

  • 0

Можно не устанавливать шрифт в систему, просто согласиться с заменой шрифта, сами параметры останутся такими как их оставил автор, а потом просто нажать esc и шрифт вернется на место

Link to comment
Share on other sites

  • 0

Можно не устанавливать шрифт в систему, просто согласиться с заменой шрифта, сами параметры останутся такими как их оставил автор, а потом просто нажать esc и шрифт вернется на место

Спасибо! ))

И еще. Свойство line-height нужно указывать каждый раз при изменении размера шрифта? 14px, 18px, 12px, 20px - вне зависимости от величины кегля?

Link to comment
Share on other sites

  • 0

Поменял высоту строки: http://jsfiddle.net/GVHSoDHREgZotPCz8CJv/brDpr/

(на jsfiddle все работает нормально со стандартным шрифтом) :(

Теперь получилось вот так - http://itmages.ru/image/view/951442/d41d8cd9

Краешек шрифта все равно выглядывает из блока div#logo. Нужно увеличить высоту строки?

И еще один момент - шрифт выглядывает из блока даже слева! Это почему так? Теперь нужно margin/padding для него устанавливать?

да поскольку оно наследуется

ОК

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Andy_Code
      Здравствуйте! Проблема заключается в следующем: есть стартовый шаблон от "Фрилансера по жизни" версии 2021 года, открываю в VSCode, ввожу в терминале npm i затем gulp, все срабатывает как и должно, создается папка с результатом, начинаю прописывать стили для header, задаю ограничивающий контейнер и при проверке работоспособности данного контейнера выясняется, что стили, прописанные мной перекрывают стили медиа-запросов, прописанных в шаблоне и по итогу адаптив не работает, получается что итоговый css собирается в не правильном порядке! Подскажите, пожалуйста, как подобную проблему можно исправить?)
    • By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
    • By RaiderCoder
      Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy