Как правильнее сверстать логотип из psd?

Question

[kamtm]

Здравствуйте!

Есть логотип в psd. Проблема, как его сверстать, "вытащить" из psd файла правильнее, так, чтобы:

1) Он был прозрачным
2) Был кроссбраузерным
3) Решение было масштабируемым, современным. Не верстал с 2000х гг)

Мои мысли:

1) Загрузить шрифт на сайт, подключить его и добавить тени через shadow. Получится ли?
2) Создать сразу логотип из psd, добавить расширения для поддержки png в старых браузерах.

Вопрос:
Почему при сохранении в png 24, тень получается черной? Может есть кто, сходу знает причину.

На фото, как должно быть, и как у меня получается в png24
i67.fastpic.ru/big/2014/0723/87/45e1ca42f7217645a9...

Может есть ссылки на полезные статьи, примеры ну эту тему.

Answer 1

[Андрей]

о боги в каком вы веке живете
уже давно модно пользоваться image assets погуглите вам понравится
helpx.adobe.com/ru/photoshop/using/generate-assets...

Comments

[kamtm]

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

Answer 2

[IceJOKER]

С зажатым CTRL нажимаете мышкой на логотип в psd, далее в списке слоев выбираете нужные слои , нажав на правую кнопку мышки на превью, выбираете пункт ПРЕОБРАЗОВАТЬ В СМАРТ ОБЪЕКТ, далее выделить пиксели CTRL + C или тащите на новую вкладку.
потом нажимаете на пункт меню ФАЙЛ, СОХРАНИТЬ ДЛЯ WEB ну и все. зачем вам шрифты и т.п., когда лого такое маленько и лучше его картинкой вставлять, а не мучаться с css

Comments

[kamtm]

Спасибо за совет со Смарт объектом. Не знал ранее про это. Но, когда нажимаю на Преобразовать тень становится темнее сразу. Почему такое происходит?

[kamtm]

То есть на примере, на фоне она с синевой, а у меня все равно выходит с темной тенью(

[IceJOKER]

может дело в слоях? попробуйте по-щелкать на иконку ГЛАЗ, он скрывает/показывает данный слой. посмотрите какой слой добавляет тень и исключите его. фотошоп не добавит того, чего нет :D

[kamtm]

Я понял, видимо, что проблема в том, что Логотип у меня просто текст с тенью. А под Логотипом лежит синеватый фон. так вот когда текст стоит под фоном, где светлее участок, тень получается одного цвета, если переместить Логотип или вставить на страницу, он уже темнее.. То есть привязка идет, тень нужного мне цвета только над одним участком фонового изображения.

Answer 3

[zooks]

Логотип не нужно "верстать". Он должен идти единым файлом, например в PNG или SVG.
Собственно в них поддерживается прозрачность.

Comments

[kamtm]

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

[zooks]

@kamtm из PSD нужно всего лишь сохранить в PNG-24. Тень может быть черной оттого, что выбран matte - нужно установить none.

[kamtm]

Можете уточнить, где убрать matte, при сохранении в png-24 такого поля нет. И да, проблема вот в чем, Логотип - это Текст с тенью. В макете он расположен на фоновой картинке. И если двигать текст, то и тень меняет свой цвет автоматически. А сама она видимо черная по-умолчанию. Вот как теперь ее цвет сменить на нужный мне, вот вопрос.

[zooks]

@kamtm это вопрос знания Фотошопа, сделайте полупрозрачную тень и сохраните в png через FIle - Save as - png. - Всё!

Answer 4

[olver]

Лучше делать SVG. Из фотошопа можно вытаскивать векторные объекты, если же он не векторным объектом там сделан, то можно обрисовать в векторном редакторе. SVG не будет размываться при любом масштабировании. Правда есть вопрос со старьем: насколько старые браузеры должны поддерживаться? С тенью у текста тоже будет гемор у оочень старых браузеров.

Answer 5

[colo]

Слить все слои, которые относятся к логотипу в один слой, потом выделить рамкой, нажать ctrl+c, ctrl+n, ctrl+v, ctrl+shift+alt+s и сохранить в png-24 с прозрачностью. Затем отменить слияние слоев в исходном .psd