powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как переделать PSD в HTML
21 сообщений из 21, страница 1 из 1
Как переделать PSD в HTML
    #38326196
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Я правильно понимаю что алгоритм такой:

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

Можно ли использовать что-то вместо фотошопа на маке чтобы открыть PSD и посмотреть свойства обьектов / вырезать что-то оттуда? Он сложный и здоровенный, не хочу с ним разбираться.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38326231
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
private,

Рецепт такой

Кусок мыла - 1 шт
Веревка - 3 метра
Прочная балка - 100 кг
Шею помыть.

Завещание можете написать тут http://www.ps-scripts.com/bb/
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38326232
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
private(сайт нужен только для html5 браузеров, соотв. все эффекты должны быть в стилях, без картинок).

хтмл5 может отбросить css-тень от картинки с альфой? Или в вашем пзд нет растровых слоев?

в хтмл5 есть еще canvas.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38326690
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
> хтмл5 может отбросить css-тень от картинки с альфой?
Точно не знаю, но это неважно, картинок в хтмл странице быть не должно, если получится тени должны быть такие-же как в фотошопе - если нет максимально близкие к ним.

Нет, канвас это другое.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38326691
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
картинки допустимы только для иконок.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38326912
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
debloggerprivate,

Рецепт такой

Кусок мыла - 1 шт
Веревка - 3 метра
Прочная балка - 100 кг
Шею помыть.

Завещание можете написать тут http://www.ps-scripts.com/bb/ Лучше прибить дизайнера, который не думает, как его соки мозга ложатся на html.

privateЯ правильно понимаю что алгоритм такой:

1) Да
2) Да
3) Да, размеры шрифтов в pt.
4) Инструменты другие, но параметры и их значения в основном такие же. Поначалу тяжело их переколбашивать, но потом привыкнешь.
5) Почему на глаз? Пиксели посчитать можно.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38327014
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Спасибо.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38327175
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Antonariy,

У Адобы сиротский DOM. Большинство годных скриптов написаны по результатам вскрытия логов, то есть в обход дома. Однако я не припомню скрипта который бы вернул параметры примененного к слою стиля (который в свою очередь состоит из кучи эффектов слоя).

Теоретически можно парсить сам пзд. Но тогда веревка с мылом покажется облегчением.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38327232
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Какой еще DOM? Ручками, ручками... Выбрал слой, открыл окошко параметров, посмотрел, нопейсал аналог на css.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38327391
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Antonariy,

Поскольку тема изначально мертвая, поделюсь недавним приколом. Открыл ФШ сделать лого, по замыслу там есть полоска с обводкой. Думаю надо верх шейпа подвести белым, а низ - коричневым. И тут, блин, доходит что это ж не CSS, а ФШ, который в принципе так делать никогда не умел и вообще программ с такими фичами не существует (можете мне поверить, в графике я разбираюсь получше кодинга).

С тех пор как я последний раз касался веб-строительства альфа, оказывается, шагнула очень далеко. По крайней мере хакать браузеры ради png уже не надо. SVG обещают стандартизовать, или как эта процедура в консорциуме называется. К тому же canvas обещает развиваться.

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

В этом смысле план автора темы выглядит крайне отсталым. :)
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38327400
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
debloggerТак вот, так дело если и пойдет дальше, в ФШ будут работать только адепты адобы. Все остальные прямо в браузере надизайнят чего хочешь.Разве что маньяки-двустаночники (с навыками верстки) какие-нибудь. Это все равно что писать текст не в ворде, а в консоли.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38327413
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Antonariy,

Так это, в общем-то в консолях (блокнотах) все и пишут для веба. И что, некрасиво получается? :)
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38328612
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
debloggerС тех пор как я последний раз касался веб-строительства альфа, оказывается, шагнула очень далеко. По крайней мере хакать браузеры ради png уже не надо. SVG обещают стандартизовать, или как эта процедура в консорциуме называется. К тому же canvas обещает развиваться.
Им бы уже прекратить дурью маяться, и свести бы как-нибудь канвас и свг под одной крышей.
Потому что при наличии канваса, у свг по сути только одно принципиально важное свойство -- декларативность.

ЗЫ: А насчёт перспектив дизайнить в фотошопе -- это да. Я некоторое время назад, реализуя планы нашего дизайнера, и разглядывая его картинки, поймал себя на мысли, что думаю в сторону "вот был бы этот кейс не таким простым и примитивным, так я бы вместо нарезки картинок на repeat-куски мог бы просто взять канвас и добавить все эти тени-красивости прямо там".
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38328664
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
The_ShadoWЗЫ: А насчёт перспектив дизайнить в фотошопе -- это да. Я некоторое время назад, реализуя планы нашего дизайнера, и разглядывая его картинки, поймал себя на мысли, что думаю в сторону "вот был бы этот кейс не таким простым и примитивным, так я бы вместо нарезки картинок на repeat-куски мог бы просто взять канвас и добавить все эти тени-красивости прямо там".Ищите и обрящете тынц .
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38328666
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
И сразу нажимайте кнопочку play :)
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38328668
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
моя сестра хотеть это

YouTube Video
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38330029
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Antonariy,

Уже подсуетились. http://psd.tutsplus.com/tutorials/tools-tips/convert-objects-to-css/ Адоба в этом вся.

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

Ну и главное на что я пытался обратить внимание - у CSS гораздо больше выразительных средств. Если нормализовать, то есть откинуть растры, то ФШ6 по сравнению с CSS3 будет в полной заднице.

А кому сейчас растры нужны? Сейчас так уже не делают.

На иллюстрации снимок дизигна. Ни одного растрового пикселя нет. 100% шейпы. Можно кому-нибудь выдать PSD на проверить тот плугин в действии? :)
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38330033
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Видите, народ уже интересуется нокаутом в CSS http://stackoverflow.com/questions/11320866/how-can-you-achieve-a-knockout-effect-using-css

И оно будет.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38330113
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Вобшем, я все сделал. Провозившись полчаса с фотошопом, где для того чтобы скопировать слой нужно нажимать кучу кнопок (выделить слой, продублировать, сохранить как - в новый, сохранить) + не стал разбираться почему некторые уровни не копируются (там наверно формулы были а не пикселы), устанавливать шрифты которых в нем нету и т.п.
В конце концов все это мне надоело и открыв ПСД как обычную картинку в ГИМПе по-быстрому перевел все в хтмл, меряя расстояния по размеру выделенной области.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38332844
deblogger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
private,

В ФШ есть slice. В пять сек можно расчленить что угодно под какие хочешь багажники.
...
Рейтинг: 0 / 0
Как переделать PSD в HTML
    #38333549
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
В новом CS6 я его не нашел, в старом был.
...
Рейтинг: 0 / 0
21 сообщений из 21, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как переделать PSD в HTML
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]