Alternative Art : breath of a phoenix |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Alternative Art : breath of a phoenix » Восстановленное » Да. Именно. Восстанавливаюсь в учителях....
Придумывать свои спообы создания...намного интереснее чем брать пример у других, да)
*глаз дёргается* это очень тонкий намёк, или мне просто кажется?
dust&
нет. Я сказал что это интереснее, но ничего против не имею, да)
Arisu Aiko
приняты Арису-тян.
можете приступать.
№1
1. Определитесь с гаммой (цветом) вашего форума.
Темная гамма.
2e5e6a; 5a6166; 0a0828;1f2c49; 000000
2.Размер.
-размер форума: 800 рх
-размер кнопок: 100*100
3.Что будет в вашем стиле. (То что можно использовать кроме шапки и кнопок)
-категории
-статистика
-картинка он/оф- лайна
- кнопки :ЛС,Профиль, удалить, и т.д.
4. В какой мере будет сложен ваш стиль.
...
5. Название вашего стиля и предназначение.
Пока что только пробник. Название отсутствует.
6. Что будет присутствовать в дизайне (Аниме:Животные:Графика:Люди и т.д.)
Аниме.
7. Как расположен Ваш форум (По правому краю,по левому, по центру)
По центру.[/align]
Урок№2
Шапка
Посмотрите.
Я знаю, что это лишь малая часть дизайна, но все же скажите свое грозное слово!
А еще у меня иконки не хотят нормально ставиться (я молчу, как они в Експлорере выглядят) и баннер в браузерах прыгает.
Отредактировано Arisu Aiko (23-06-2010 16:46:33)
Урок№3. Иконки.
урок не мой.
Этот урок научит Вас создавать классные кнопки с отблеском, как у стекла, которые Вы сможете использовать не только на своем сайте, но и на баннерах, печатных материалах и т.п.
1. Создайте документ любого размера (я использовал размер 500х500 px). Используя инструмент Rounded Rectangle с радиусом в 8px, нарисуйте квадрат (зажав клавишу Shift). После этого откройте меню Blending Options для этого слоя и выберите пункт Gradient Overlay. Задайте два цвета, как на рисурке ниже и назовите этот слой “bg“.
2. Теперь копируйте этот слой и назовите копию “glass“. Выберите его и переместите выше слоя “bg“. Залейте его белым цветом и измените его прозрачность (Opacity) на, примерно, 50%. Используя инструмент Square Marquee (клавиша М) и создайте выделение примерно таким, как на рисунке ниже. Проверьте, выбран ли слой “glass” и нажмите клавишу Delete.
3. Мы добились эффекта стеклянного блеска. Чтобы немного его смягчить, используйте инструмент Round Marquee. Создайте выделение, как на рисунке ниже. Далее выбирайте Select > Feather (Ctrl+Alt+D) и вводите значение в 30px. Нажимайте клавишу Delete.
4. Зажав клавишу Ctrl, кликните по слою “bg“, чтобы выделить его содержимое, и выбирайте Select > Modify > Expand. Вводите 1px и нажимайте ОК. Создавайте новый слой ПОД слоем “bg“, заполняйте выделение белым цветом и называйте слой “shine“.
5. После этого шага Вы не заметите изменений из-за белого фона. Чтобы все было нагляднее, создайте еще один слой ПОД слоем “shine” и нарисуйте на нем черный прямоугольник. Вы увидите, чего мы добились. Назовите этот слой “black-bg“.
6. Теперь выбираем инструмент Round Marquee и создаем выделение, как на рисунке ниже. Затем отправляемся в меню Select > Feather (Ctrl+Alt+D) и вводим 30px. Выбираем слой “shine” (не снимая выделения) и дважды нажимаем клавишу Delete.
7. Повторяем действие с верхней частью рисунка, но нажимаем Delete уже только один раз.
8. Теперь, если хотите, можете настроить прозрачность (Opacity) слоя “shine“.
9. Зажав Ctrl, щелкаем по слою “bg” и отправляемся в меню Select > Modify > Expand. Вводим значение в 2px. Создаем новый слой над слоем “black-bg” и под слоем “shine” и называем его “frame“. Заполняйте его любым цветом (я выбрал черный).
10. Теперь скройте слой “black-bg” и Вы увидите, что у нас получилось. 
Урок№2
текст не устраивает, скучный. Написан одним шрифтом + никакого разнообразия да. убери тень и размытие смотрится грязно.
Скобка перед название слишком белая. Можно потемнее. Ибо на шапке ничего белого нет,чтобы сочеталось.
Arisu Aiko
Аико, не торопись создать дизайн за один день. Это плохо получается в конечном итоге.
Дизайн несогласован. К примеру у тебя меню навигации столбиком стоит и закрывает прекрасное лицо Изаи *О* не допущу хд
А еще у меня иконки не хотят нормально ставиться (я молчу, как они в Експлорере выглядят)
так надо в первом пункте копаться.
а прыгает баннер возможно из-за того что ты что-то не то понаставила. о_о
Урок№2
Мне эта шапка тоже не нравится.. х( Я ее переделаю.. Хотя бы чуть-чуть.. Вашу критику учтем-с..
Аико, не торопись создать дизайн за один день. Это плохо получается в конечном итоге.
Да знаю я.. Просто поставила шапку, поняла что как-то она одиноко смотрится, полезла делать фон, ну и понеслось..
К примеру у тебя меню навигации столбиком стоит и закрывает прекрасное лицо Изаи *О*
не допущу хд
Я просто не знаю, как это меню навигации двигать. Т.е как двигать "Форум и т.д" я знаю, а как: "Новые сообщения и т.д" - нет! Кстати, я знаю, что можно оставить только ссылку "Активные темы", а как?
И еще:
Может быть напишите урок, как делать фоны? оО
так надо в первом пункте копаться.
А я копалась уже. Ему глубоко пофиг! х(
Хотела спросить.. А откуда брать структуру? И можно ли собрать цвета в генераторе стилей и взять оттуда только второе окно, а первое из стандартных стилей, например, взять?
А я копалась уже. Ему глубоко пофиг! х(
Теперь будем ставить иконки, они у нас размером 75х75, поэтому идем в первое окошко, и ищем там вот такой код
Код:
/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 105px;
height: 100px;
padding-top: 1px;
margin-top: 1px;
}
width: 105px - это ширина наших иконок
height: 100px - высота
Ставим height на 75, а width на 80, чтобы 5 пикселей были в отступе от текста.
Теперь идем во второе окно, прокручиваем его до конца. Пункт CS4.
Заменяем все на это
Div.icon {background-image : url(картинка); background-repeat: no-repeat;}
TR.inew Div.icon {background-image : url(картинка); background-repeat: no-repeat;}
TR.isticky Div.icon {background-image : url(картинка); background-repeat: no-repeat;}
TR.iclosed Div.icon {background-image : url(картинка); background-repeat: no-repeat;}
TR.iredirect Div.icon {background-image : url(картинка); background-repeat: no-repeat;}
Div.icon - это старая тема, то есть Old
TR.inew Div.icon - это новая тема, то есть New
TR.isticky Div.icon - это выделенная тема, то есть Stick
TR.iclosed Div.icon - это закрытая тема, то есть Closed
TR.iredirect Div.icon - это перенесенная тема, то есть Redirect, но я ставлю ее как Old.
А откуда брать структуру?
скажу как я делаю.
когда форум создал, в пнкте "стиль" заполненные и первое и второе окошко. в генераторе стилей я собрал второе окошко. а первое не тронул.
это самая обычная структура ) там потом все заменяем-меняем и собираем)
Теперь будем ставить иконки, они у нас размером 75х75,
кхе-кхе... они у меня 100*100, может в этом проблема?
это самая обычная структура ) там потом все заменяем-меняем и собираем)
Я вас понял! *лыбится*
Просто кто-то говорит, что в генераторе плохо делать, кто-то что наоборот надо, а я запуталась.
До середины следующей недели госы, потому временно не могу выполнять задания( Но из учеников не исключайте, как освобожусь сразу всё сделаю. Очень извиняюсь **
За урок спасибо, понять всё поняла.
Я просто не знаю, как это меню навигации двигать. Т.е как двигать "Форум и т.д" я знаю, а как: "Новые сообщения и т.д" - нет!
Юзер линки. Да. Там копаться надо
псыы. спасибо хино х)
/* D4 User links
-------------------------------------------------------------*/
/* D4.2 */
#pun-ulinks .container {
border-top: none;
padding: 0.6em 1em;
text-align: center;
}
что выделил меняешь.
Uri
угу, жду :зз
удачи!
кхе-кхе... они у меня 100*100, может в этом проблема?
нет. это вообще самый первый урок по css на AA)
не я писал. скопировал о_о
кто-то что наоборот надо, а я запуталас
не путайся больше)
вообще, только там делаю диз. собираю цвета точнее.
а дальше дело фотошопа и мозгов о_о.
Юзер линки. Да. Там копаться надо
Я копалась! х( как бы я иначе это меню впихнула в шапку? ладно.. с этим моментом я еще разберусь *кровожадно*
нет. это вообще самый первый урок по css на AA)не я писал. скопировал о_о
Значит это глюк... ОО"
не путайся больше)
Хорошо. *ушла переделывать шапку и заодно собирать цвета*
Arisu Aiko
Хорошо, жду.
Я копалась! х(
нет. плохо копалась.
надо копаться в первом окошке в D4 User links
Значит это глюк..
глюк чего?
у css глюки редко бывают. все зависит в основном от браузеров о,о'
factor*
Глянь
Правда на форуме она выглядит не так, как хотелось бы х(
Arisu Aiko
нет не то.
дождись утра, отпишусь по всем критериям.
не пойдет.
нет не то.дождись утра, отпишусь по всем критериям.не пойдет.
нуу.. *огорчилась*
а мне нравииитсяя... ну ладно. подождем до утра. х)
Arisu Aiko
1. Текст. Надпись "Different" под конец не читабелен. Подбери другой цвет и убери тень.
2. Повторяюсь не первый раз. Сохраняйте в jpg формате. Не у всех стоит без лимит. Шапка сама большого размера. Долго грузиться будет.
3. Сама идея шапки мне понравилась, да.
4. Цвета. Сделай их яркими. Ибо буква "D" самая яркая. Такого цвета в шапке я больше не видел.
Если ты хотела, чтобы на название обратили внимание, стоило тогда всю надпись сделать ярко-красной.
Единственное что, мне эта текстура "штриховки" не нравиться. Сугубо мое мнение~можешь не менять. )
псы. прости за столь поздний ответ х)
factor*
ладно я изменю все, но завтра *зевает*
псы. прости за столь поздний ответ х)
так и быть прощаю.. хD
3. Сама идея шапки мне понравилась, да.
радует... *лыбится* а я думала, что тебе именно идея и не понравилась.. оО
радует... *лыбится* а я думала, что тебе именно идея и не понравилась.. оО
нет,нравиться)
хорошо, жду)
Вот новая версия шапки!
factor*
АУ! я, конечно, извиняюсь за назойливость, но мне интересно услышать критику своей шапки!
Arisu Aiko
не стоит аукать.
я же говорил, что я человек и интернет в кармане не держу.
ответ в след. посте.
Вы здесь » Alternative Art : breath of a phoenix » Восстановленное » Да. Именно. Восстанавливаюсь в учителях....