Кот

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

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


Вы здесь » Кот » Архивы » `tsunami | Moose


`tsunami | Moose

Сообщений 31 страница 39 из 39

31

Moose
Хорошо)

Разные виды дизайнов
Часть 1. Объединенный дизайн.
На основе статьи by `tsunami.
Этот вид дизайнов сейчас довольно популярен, но слишком многие считают, что это трудно, они не справятся и прочее. На самом деле, делается это довольно легко, но работа может казаться сначала трудоемкой (если ты вдруг накосячила где-то). А вот то, что у нас должно получиться: http://obdiz.mybb.ru/

1. Итак, заходим в фотошоп и создаем новый файл (думаю, скрин тут не нужен). Размер можно взять 1900 х 1080 для широкоформатных мониторов, но я обычно беру где-то 1500 х 1080, чтобы дизайн отображался полностью или почти полностью на ноутбуках, планшетах или нетбуках. Тут уже зависит от твоей цели, но мне работу будет удобнее смотреть, если ты возьмешь 1500 (или 1400)х1080.
2. Заливаем этот файл тем цветом, который ты бы хотела видеть фоном форума. Картинку использовать не советую, с этим будет дольше и сложнее, во всяком случае, для начинающих дизайнеров.
3. Создаем еще один файл. Высота его должна быть как и у предыдущего документа (1080 в моем случае), а ширина файла - это ширина нашего форума. Думаю, логичнее будет взять 850 х 1080.
4. Этот файл (который мы создали в пункте 3) заливаете тоже цветом, но другим, чтобы не путаться.
5. Затем этот файл №2 (назовем его так) выделяем (Ctrl + A), копируем (Ctrl + C) и вставляем в файл №1 (Ctrl + V). Если файл №2 встал по центру файла №1, то ты все сделала правильно.
6. Создаем еще один файл (файл №3). Ничем его не заливаем, оставляем белым. Высота файла - это высота твоей шапки. Я беру 500, стандарт - 400. Ширина та же, что и у предыдущего файла (850). В нашем случае надо брать файл (шапку) той велечины, что ты выставила в предыдущем уроке, когда мы первое окно стиля разбирали.
7. Выделяем его (Ctrl + A), копируем (Ctrl + C) и вставляем в два предыдущих совмещенных файла (Ctrl + V).
8. Будущая шапка тоже должна встать по центру. Берем инструмент перемещения и двигаем ее наверх, туда, где и располагается обычно всякая нормальная шапка. Только двигай ее не за пределы второго слоя, можешь взять инструмент масштаб, увеличить и проверить.

Получаем нечто такое

http://s3.uploads.ru/t/4bNsR.jpg

9. А дальше делаем все так, как тебе нужно - коллаж, текст и т.д. Сейчас можно ограничиться просто большой картинкой или несколькими, скромным коллажиком. Если хочешь, можешь делать глобально.

У меня вышло вот так

http://s2.uploads.ru/t/lstJQ.jpg

10. Дальше первые два слоя (у меня голубенький и бежевый) объединяем друг с другом и со всем, что сделали. Белый слой остается необъединенным. Его мы перемещаем на самый верх.

Вот так

http://s3.uploads.ru/t/ICjfh.jpg

11. Берем инструмен выделение и аккуратненько выделяем белую область белого слоя, который у нас сверху. Вот здесь обычно и начинаются ошибки, так как выделить надо постараться очень ровно, чтобы не было потом швов.
12. Выделила? Теперь идем в слои и делаем белый слой невидимым (нужно нажать на глазик около этого слоя).
13. Дальше копируем выделенную область (Ctrl + C). Главное, смотри, чтобы у тебя был активным не белый слой, который мы сделали невидимым, а фон - объединенный слой. Иначе ничего не получится.
14. Создаем новый документ (фотошоп сам подгонит его под размер той области, которую ты скопировала).
15. Вставляем в этот новый документ выделенную область (Ctrl + V). Если документ так и остался белым, значит, это сигнал к тому, что ты не объединила слои или белый слой все-таки был активным, а не фон.
16. Сохраняем все отдельно - шапку и фон. Готово.

Шапка

http://s3.uploads.ru/t/jQpDB.jpg

Когда-то давно я сама училась по похожей статье.
Сейчас даже автора не вспомню, прошу извинить. Эту статью писала сама так, как делаю это я.

Задание
1. Можешь создать новый тестовик, можешь переделывать этот - тебе нужно попробовать сделать объединенный дизайн.

0

32

`tsunami
http://helpmegays.mybb.ru/

0

33

Moose
Ага, молодец, отлично)

Разные виды дизайнов
Часть 2. Полупрозрачный стиль.
На основе статьи by .louie.
К сожалению, сама такие стили редко делаю, показать не на чем, но, думаю, многие знакомы с таким видом дизайна. В этом уроке мы научимся сливать тело форума с фоном, вернее, убирать тело. На то этот стиль и полупрозрачный. А что у нас выйдет, ты увидишь в конце...
1. Нам нужно убрать рамки. Мы идем во второе окно стиля:

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #00000 #00000 #00000 #00000; border-style:none !important;
  }

То, что я выделила синим, нам и надо вставить. Так мы подставляем это свойство-значение до блока CS3. Links. Важно, чтобы оно стояло именно уже перед самой второй фигурной скобкой.
2. Дальше нам нужно убрать само тело форума.

/* CS1.1 */
#pun { background-color: transparent;
background-repeat: repeat;
background-position : center;}

Все то, что я выделила, мы и вставляем вместо backround-color: #шестизнак.
Этим свойством-значение мы заменяем все backround-color до самого CS2. Border colors.
Вроде бы, ничего не забыла.

Задание
1. Как ты уже поняла, думаю, тебе надо попробовать на этом тестовике или на новом создать полупрозрачный стиль.

0

34

`tsunami
http://helpmegays.mybb.ru/ - вроде всё верно сделала.

0

35

Moose
Мне кажется, не совсем. Хотя... Покажи мне ту картинку, которая у тебя на фоне стоит. Просто отдельно - ссылкой или сразу изображением кинь.

0

36

http://s2.uploads.ru/WzhYZ.png

0

37

!!!

0

38

Moose
А, ну тогда нормально.

Собственно, наше обучение окончено. Я была очень рада с тобой познакомиться и занимать, а если ты захочешь, то мы сможем продолжить наше обучение в продвинутых.

0

39

`tsunami
Хочу <3

0


Вы здесь » Кот » Архивы » `tsunami | Moose


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC