Помощь по конвертации PSD в HTML / CSS


Я знаком с CSS и HTML, а также видел несколько учебных пособий по конвертации PSD в HTML / CSS. как это
Теперь у меня есть PSD шаблон, который я хочу преобразовать в HTML / CSS страницу.
Своя картина упомянутого шаблона
Теперь я в замешательстве. Я не знаю, где нарезать и конвертировать в PNG изображения.

  • Например Top black 404, я должен преобразовать его в изображение PNG и выложить на веб-сайт?

  • Или я должен написать сам с тем же шрифтом? Также об текстовой ошибке, помещенной под верхнюю страницу 404.

  • Должен ли я нарезать и сохранить фон как изображение и положить его на фон страницы?

Пожалуйста, поделитесь своим опытом.

Источник

3 ответа

Решение

Думаю, в действительности нет никакого смысла делать фоновое изображение и png для заголовка, если вы можете сделать их оба на одном изображении. Это сэкономит время отклика для вашего 404.

Тем не менее, я бы порекомендовал снять весь текст ниже "Ошибка 404", чтобы сохранить фоновое изображение, а затем расположить белый текст с помощью CSS и стандартного шрифта.

Кроме того, вам нужно будет вырезать поле поиска, чтобы сделать фон вашего поля ввода для поиска и кнопку поиска для фона для кнопки Div или кнопки ввода, в зависимости от того, что вы предпочитаете.

Источник

Я бы просто добавил текст как текст используя @fontface

На следующем веб-сайте вы можете конвертировать свой шрифт для Интернета, и он даже создает CSS для вас, я думаю.

http://www.fontsquirrel.com/fontface/generator

Однако вам нужно иметь лицензию на использование шрифта в Интернете.

Источник

Сначала я бы пересмотрел использование большого фонового изображения, которое а) затрудняет чтение шрифта и б) для загрузки страницы сообщения 404 потребуется больше времени.

Если вы будете придерживаться этого, вам, очевидно, понадобится одно фоновое изображение бумаги.

Я преобразовал бы ваш текст "ошибка 404" в png, а затем использовал бы его в качестве фонового изображения тега h1, используя технику замены изображений, чтобы сохранить текст в разметке. Кроме того, вы можете использовать его в качестве IMG с соответствующим атрибутом ALT.

Источник
Другие вопросы по тегам