Кот |
Привет, Гость! Войдите или зарегистрируйтесь.
прочитала, ознакомилась.
учитывая название следующего урока, было бы интересно прочитать его, а потом менять что-либо на тестовике. можно так?
Следующий урок уже совсем о другом будет. Ну, если хочешь, ты можешь вообще ничего не менять, конечно.
`tsunami
в целом все понятно С:
посему пока не буду ничего менять, жду следующего урока).
Разные виды дизайнов
Часть 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. Будущая шапка тоже должна встать по центру. Берем инструмент перемещения и двигаем ее наверх, туда, где и располагается обычно всякая нормальная шапка. Только двигай ее не за пределы второго слоя, можешь взять инструмент масштаб, увеличить и проверить.
9. А дальше делаем все так, как тебе нужно - коллаж, текст и т.д. Сейчас можно ограничиться просто большой картинкой или несколькими, скромным коллажиком. Если хочешь, можешь делать глобально.
10. Дальше первые два слоя (у меня голубенький и бежевый) объединяем друг с другом и со всем, что сделали. Белый слой остается необъединенным. Его мы перемещаем на самый верх.
11. Берем инструмен выделение и аккуратненько выделяем белую область белого слоя, который у нас сверху. Вот здесь обычно и начинаются ошибки, так как выделить надо постараться очень ровно, чтобы не было потом швов.
12. Выделила? Теперь идем в слои и делаем белый слой невидимым (нужно нажать на глазик около этого слоя).
13. Дальше копируем выделенную область (Ctrl + C). Главное, смотри, чтобы у тебя был активным не белый слой, который мы сделали невидимым, а фон - объединенный слой. Иначе ничего не получится.
14. Создаем новый документ (фотошоп сам подгонит его под размер той области, которую ты скопировала).
15. Вставляем в этот новый документ выделенную область (Ctrl + V). Если документ так и остался белым, значит, это сигнал к тому, что ты не объединила слои или белый слой все-таки был активным, а не фон.
16. Сохраняем все отдельно - шапку и фон. Готово.
Когда-то давно я сама училась по похожей статье.
Сейчас даже автора не вспомню, прошу извинить. Эту статью писала сама так, как делаю это я.
Задание
1. Можешь создать новый тестовик, можешь переделывать этот - тебе нужно попробовать сделать объединенный дизайн.
`tsunami
взяла тот же исходник, на том же тестовике. сделала фон и шапку как писалось в уроке:
http://s3.uploads.ru/nLMke.jpg - фон
http://s3.uploads.ru/sXQ9x.jpg - шапка
может и не самый удачный вариан, т.к. не сильно видно.. но если присмотреться, то деревья по бокам выходят за границы самого форума - значит все правильно.
так ведь?
crimson soda
Не очень видно. Смотри, справа, например, листик зеленый у тебя конкретно обрезан, ветки обрезаны и это видно. Задача объединенного дизайна - не прерывать коллаж или картинку границами шапки, а расширить ее.
`tsunami
у меня с листиком все ок о_О на шапке обрезан, на фоне нет. и на форуме не обрезан.
вот только съехала шапка чуть-чуть вправо, и я не могу понять, почему.
crimson soda
Ты вообще фон ставила? Его нет на тестовике, там лист обрезан...
`tsunami
страничку обновила? просто у меня все круто.
- кликабельно.
а вот код:
/* CS1 Background and text colours background-color: #E139F1;
-------------------------------------------------------------*//* CS1.1 Тело форума */
#pun { background-color: #D2C69E;
background-repeat: repeat;
background-position : center;}/* CS1.2 Тело форума, фон */
body {background-color: #000000;
background-image : url("http://s3.uploads.ru/nLMke.jpg");
background-repeat: no-repeat;
background-position : top center;
background-attachment: scroll;
overflow-x: hidden;
}/* CS1.3 Категории */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
background-color: #D2C69E;
color: #543F2B;
}/* CS1.4 Шапка */
#pun-title, #pun-title .container, .punbb .modmenu .container {
background-image : url("http://s3.uploads.ru/sXQ9x.jpg");
}
crimson soda
Хорошо, молодец)) ну у меня планшет, так что может и не отображаться...
Новый урок чуть позже.
Разные виды дизайнов
Часть 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. Как ты уже поняла, думаю, тебе надо попробовать на этом тестовике или на новом создать полупрозрачный стиль.
