Содержание:
I. Нарезка: от ПСД к отдельным частям дизайна.Задание:
Мы будем работать на другом пробнике, чтобы не путаться со старыми настройками, а начнем всё с нуля.заодно и все мои косяки исправим
1. Зарегистрируйся на новом пробнике.
Верстка диза
Сообщений 1 страница 2 из 2
Поделиться12019-06-02 04:14:33
Поделиться22019-06-02 05:23:14
Нарезка: от ПСД к отдельным частям дизайна.
В первую очередь, надо убедиться, что у тебя на компе есть все шрифты, использованные в псд, а недостающие скачать и установить.
Почему:[indent]► Во-первых, фотошоп может неправильно отображать шрифты, которых на компе нет.
[indent]► Во-вторых, потому что, возможно, тебе придется заливать эти шрифты на форум.Вот я открыла псд в фш и мне понадобилось скачать два шрифтаПосле этого, я обычно создаю отдельную папку, где буду сохранять все части и туда же скину шрифты.(чисто организационный пунктик)
итак, мы открыли псд в фш:
Определенных правил нарезки псд не существует. Всё зависит от самого диза.
Например: шапка форума может состоять из одной картинки пнг, или из двух пнг + гиф, или даже из трёх составляющих пнг + гиф + рамка прописаная кодом (но это в крайних случаях и вообще не советую).Именно поэтому мы будем сначала осматривать наш диз и расчитывать как будем переносить ВИД в КОД: где лучше картинку поставить, а где лучше часть нарисовать кодом (ведь код весит меньше, чем крупная картинка, соответственно дизайн будет загружаться быстрее).
Кодом лучше, если части очень простые.
пример #1на дизе, что стоит сейчас, кодом я прописала профиль:
тут даже заметно, что я лоханулась с оттенком
но сам код простой:
задний план профиля в теме: background: #dcd6e7; ( ну и ширину и тд...)
верхнюю часть: задний план ника background: #e7d382; + border-bottom: 4px solid #46627c;
для низа я "смухлевала", для того, чтобы "обмануть" кнопку личной страницы хд
прописала всему контейнеру профиля border-bottom и box-shadow хдд
НО! я могла просто вырезать три части - картинки:
верх (желтенькая и синенькая полоска), низ ( синенькая и желтая) и серединку который фон, и поставить их все три сразу бэкграунд картинкой (помнишь, мы это уже делали) для всего профиля но в этом случае появилась проблема с личной страницей и пришлось переделатьпример #2 (проще хд )форумы на старом дизе прописаны без изображений, а простым кодом
потому что у нас фон одного цвета и тонкая рамка. всё просто прописать:
если как в новом дизе, фон форума идет картинкой, значит эту картинку нам надо вырезать из псд и добавить в код.
TO BE CONTINUED