У Вас отключён javascript.
В данном режиме, отображение ресурса
браузером не поддерживается
маревом ярчайшего света мажет по лицу: лучи — ослепляюще. раздражает. что в висках колет — болит. не должна показывать — почему это как мантррой где-то там, отдаленно, что изначально и не придаешь этому значения, но после. чертово после, после которого ничего — разве оно могло иначе...Читать продолжение

Crazy Cat

Объявление


Итак, господа, сейчас 20:00 по мск, ровно через 30минут форум будет временно недоступен, потому что будет переодеваться! не подглядывайте, он стесняшка :Д кстати, теряйте посты! -ваш жон батон-

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Crazy Cat » Tutorial » Верстка диза


Верстка диза

Сообщений 1 страница 2 из 2

1

Содержание:
I. Нарезка: от ПСД к отдельным частям дизайна.

Задание:
Мы будем работать на другом пробнике, чтобы не путаться со старыми настройками, а начнем всё с нуля.заодно и все мои косяки исправим
1. Зарегистрируйся на новом пробнике.

0

2

Нарезка: от ПСД к отдельным частям дизайна.

В первую очередь, надо убедиться, что у тебя на компе есть все шрифты, использованные в псд, а недостающие скачать и установить.
Почему:

[indent]► Во-первых, фотошоп может неправильно отображать шрифты, которых на компе нет.
[indent]► Во-вторых, потому что, возможно, тебе придется заливать эти шрифты на форум.

Вот я открыла псд в фш и мне понадобилось скачать два шрифта

https://i.imgur.com/ZdeBbe6.png

После этого, я обычно создаю отдельную папку, где буду сохранять все части и туда же скину шрифты.(чисто организационный пунктик)


итак, мы открыли псд в фш:
Определенных правил нарезки псд не существует. Всё зависит от самого диза.
Например: шапка форума может состоять из одной картинки пнг, или из двух пнг + гиф, или даже из трёх составляющих пнг + гиф + рамка прописаная кодом (но это в крайних случаях и вообще не советую).

Именно поэтому мы будем сначала осматривать наш диз и расчитывать как будем переносить ВИД в КОД: где лучше картинку поставить, а где лучше часть нарисовать кодом (ведь код весит меньше, чем крупная картинка, соответственно дизайн будет загружаться быстрее).

Кодом лучше, если части очень простые.

пример #1

на дизе, что стоит сейчас, кодом я прописала профиль:
https://i.imgur.com/JhyYrRO.png
тут даже заметно, что я лоханулась с оттенком
но сам код простой:
задний план профиля в теме: background: #dcd6e7; ( ну и ширину и тд...)
верхнюю часть: задний план ника background: #e7d382; + border-bottom: 4px solid #46627c;
https://i.imgur.com/0EzOy4j.png
для низа я "смухлевала", для того, чтобы "обмануть" кнопку личной страницы хд
прописала всему контейнеру профиля border-bottom и box-shadow хдд
https://i.imgur.com/cAFtig2.png
НО! я могла просто вырезать три части - картинки:
верх (желтенькая и синенькая полоска), низ ( синенькая и желтая) и серединку который фон, и поставить их все три сразу бэкграунд картинкой (помнишь, мы это уже делали) для всего профиля но в этом случае появилась проблема с личной страницей и пришлось переделать

пример #2 (проще хд )

форумы на старом дизе прописаны без изображений, а простым кодом
потому что у нас фон одного цвета и тонкая рамка. всё просто прописать:
https://i.imgur.com/kLQ13hN.png
если как в новом дизе, фон форума идет картинкой, значит эту картинку нам надо вырезать из псд и добавить в код.

TO BE CONTINUED

0


Вы здесь » Crazy Cat » Tutorial » Верстка диза


Рейтинг форумов | Создать форум бесплатно