Кот

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

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


Вы здесь » Кот » Архивы » ути, моя лапа


ути, моя лапа

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

1

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

0

2

Rush написал(а):

прости с определением пола туговато хд

В реале это прозвучало бы печально. К счастью, у меня есть сиськи!

Rush написал(а):

ты пробовал... ээ.. о когда-нибудь делать дизайны?

A long time ago, in a galaxy far, far away... Даже не могу вспомнить адреса тестовых форумов теперь.

Исходники - анимушечки, игрушечки, мультяшечки. Можно фентези, даже реальных людей можно, если не гламурные петушки и курицы. Я почти всеядная.
Очень-очень хотела бы научиться стрелять лазерными лучами из глаз, а ещё из лука огненными стрелами по красивым голым мужикам. Но начнём мы, наверное, с чего-то попроще? Неплохо было бы сделать простой минималистичный дизайн, чтобы разобраться со всеми атрибутами и селекторами, научиться писать "чистый" код без ненужных элементов.

0

3

Яемдетей
создавай тестовик
определись с тематикой будующего дизайна
найди исходники на:
- фоны
- шапку
- иконки

0

4

После того, как ты с этим определишся, прочитай это:

напуствие

Я не считаю, что дизайны должны быть похожи друг на друга. Ролевые же отличаются друг от друга, так почему же дизайны должны быть под штамповку?
Первое и самое важное - не бойся отличаться от других, но и не перебарщивай. Не делай ненужные коллажи, если это не вписывается в дизайн, лучше просто хорошо обработай одну картинку, сделай ее одним целым с остальными элементами. Ведь главное - создать целостность композиции, представь, что ты рисуешь картинку, к примеру пейзаж.
Во-вторых старайся делать максимально легкую графику, чтобы дизайн грузился так быстро, как мог. Используй png только там, где есть прозрачные детали, а для остальных сохраняй в формате jpg.
В-третьих, следи за цветовой гаммой - не делай слишком темные или слишком яркие цвета, у большинства пользователей зрение далеко не самое лучшее, так что делай так, словно ты и сама с ужаснейшим зрением.
В-четвертых, дизайн не должен обрезаться или повторяться на больших разрешениях (самое большое 1920*1200), делай так, словно у тебя самое большое разрешение экрана.
В-пятых, не нагружай хтмл-верх и низ форума, все, что можно переноси в ксс, так дизайн будет легче.
В-шестых, сохраняй псд и делай для дизайна макет, чтобы в случае чего легко исправить косяки и переделать что-то.

Затем это:

создание макета для дизайна

Это важная и полезная вещь поможет вам менять любые элементы дизайна. Во-вторых получается намного меньше косяков, чем, когда элементы разрознены. В-третьих можно сразу посмотреть на общий вид дизайна и решить все ли подходит друг другу.
Для удобства можно назвать ваши элементы - шапка, передний фон, задний фон и т.д. Советую сам макет делать для большого разрешения экрана (1920*1200), потому что потом уже на самом форуме фон может обрываться или повторятся, если он будет меньше ширины 1920 пикселей.
Для создания макета создаем файл размером 1920*1200 и окрашиваем его в любой цвет. Делается это для того, чтобы потом не запутаться, что в вашем макете - что. ДЛя переднего фона создаем файл шириной форума и высотой 1200 пикселей и сразу же окрашиваем его в цвет, а потом переносим на наш макет. Для шапки создаем другой файл любой ширины (до 1920 пикселей) и любой высоты, тоже окрашиваем его и переносим его на самый первый файл.
Элементы самого дизайна делаем отдельно, но обязательно сохраняем псд, чтобы потом если что можно было что-то изменить, а затем уже склеиваем слои и переносим на наш макет.

Потом вот это:

Пошаговая инструкция по созданию дизайна

1. Создаем файл размером 1920*1200 px. Это задний фон. Можно залить его цвеом, можно наложить бесшовную текустуру, а можно просто найти картинку соотвествующего размера.
2. Создаем файл размером 800*1200 px. Где 800 - желаемая ширина форума. Это будет передним фоном.
3. Создаем файл размером 800*400 px, где 800 - желаемая ширина форума, 400 - высота шапки. Это шапка. Если вы хотите сдлеать шапку на всю длину форума, то создавайте файл размером 1920*400 (высота шапки) px.
4. Далее создаем иконки и ещё нужные нам элементы (категории, картинки в меню навигации и т.д.)
5. После того как вся графика готова - сохраняем ее в псд и сводим слои, а заетм переносим на первый файл (размером 1920*1200 px). Это макет нашего дизайна, далее вам надо только его разрезать и вставить в коды.

После всего выше перечисленного рассматривай макеты:
макет для дизайна с шапкой на всю длину
http://uploads.ru/i/G/W/D/GWDPc.jpg
макет для дизайна с шапкой на ширину форума
http://uploads.ru/i/f/D/4/fD4Bb.jpg

Если что будет непонятно или вообще запутаешся, спрашивай обязательно будем разбираться)

Отредактировано Rush (2012-06-08 15:42:06)

0

5

Ва-1, тестовик:

http://caramelospandas.6bb.ru/


Ва-2, с тематикой и исходниками определиться будет сложно, потому что я как обычно начала всё делать через жопу. Намучаешься ты со мной, сенсей.

В-3, хочу кое-что уточнить о нашей системе обучения. Можно на первых порах показывать не готовое задание, а доставать тебя миллионом вопросов в процессе? Честно говоря, я не совсем осознаю, что можно сделать с дизайном на платформе Mybb, а что нельзя. Например, как здесь с прикручиванием java-скриптов? Хочу сделать такую "гармошку":
http://tympanus.net/Tutorials/CSS3ImageAccordion/

В-4, для навигации пока не могу подобрать шрифт, над остальными иконками ещё думаю. Мб будут какие-то замечания сразу на этом этапе насчёт цветовой гаммы, графики?
http://rghost.ru/38586125/image.png

+1

6

Яемдетей написал(а):

Хочу сделать такую "гармошку":


вроде где-то я даже видела код для такой гармошки, но надо посмотреть

Яемдетей написал(а):

http://rghost.ru/38586125/image.png


по мне так немного ярковато, но выглядит инетересно, для такого не стоит использовать готически шрифты и какие-нибдуь строгие, думаю подойдет рукописный

Яемдетей написал(а):

Можно на первых порах показывать не готовое задание, а доставать тебя миллионом вопросов в процессе?


можно

0

7

Значит так, вот что мне сказали насчет твоего аккордеона:

Ghоst написал(а):

Только вот работать это будет только в самых последних версиях браузеров, это css3.

Там, где нужно разместить. <figcaption> - описание элемента.


Код:
<div class="ia-container">
 
    <figure>
        <img src="images/1.jpg" alt="image01" />
        <input type="radio" name="radio-set" checked="checked" />
        <figcaption><span>True Colors</span></figcaption>
 
        <figure>
            <img src="images/2.jpg" alt="image02" />
            <input type="radio" name="radio-set" />
            <figcaption><span>Honest Light</span></figcaption>
 
            <figure>
                <!-- ... -->
 
                <figure>
                    <!-- ... -->
 
                    <figure>
                        <!-- ... -->
 
                        <figure>
                            <!-- ... -->
 
                            <figure>
                                <!-- ... -->                                     
 
                                <figure>
                                    <!-- ... -->
                                </figure>
 
                            </figure>
 
                        </figure> 
 
                    </figure> 
 
                </figure>
 
            </figure>
 
        </figure>
 
    </figure>
 
</div>

Стили. Либо в html-верх, либо во второе окно стилей без тегов <style> </style>.

Код:
<style>.ia-container {
	width: 685px;
	margin: 20px auto;
	overflow: hidden;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
	border: 7px solid rgba(255,255,255,0.6);
}

.ia-container figure {
    position: absolute;
	top: 0;
	left: 50px; /* width of visible piece */
	width: 335px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.ia-container > figure {
    position: relative;
	left: 0 !important;
}

.ia-container img {
	display: block;
	width: 100%;
}

.ia-container input {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px; /* just cover visible part */
	height: 100%;
	cursor: pointer;
	border: 0;
	padding: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
	z-index: 100;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.ia-container input:checked{
	width: 5px;
	left: auto;
	right: 0px;
}
.ia-container input:checked ~ figure {
	-webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
	left: 335px;
}

.ia-container figcaption {
	width: 100%;
	height: 100%;
	background: rgba(87, 73, 81, 0.1);
	position: absolute;
	top: 0px;
	-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.ia-container figcaption span {
	position: absolute;
	top: 40%;
	margin-top: -30px;
	right: 20px;
	left: 20px;
	overflow: hidden;
	text-align: center;
	background: rgba(87, 73, 81, 0.3);
	line-height: 20px;
	font-size: 18px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 700;
	padding: 20px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
} 

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
	background: rgba(87, 73, 81, 0);
}

.ia-container input:checked + figcaption span {
	-webkit-transition: all 0.4s ease-in-out 0.5s;
    -moz-transition: all 0.4s ease-in-out 0.5s;
    -o-transition: all 0.4s ease-in-out 0.5s;
    -ms-transition: all 0.4s ease-in-out 0.5s;
    transition: all 0.4s ease-in-out 0.5s;
	
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
    filter: alpha(opacity=99);
	opacity: 1;
	
	top: 50%;
}

.ia-container #ia-selector-last:checked + figcaption span {
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.ia-container input:hover + figcaption {
	background: rgba(87, 73, 81, 0.03);
}

.ia-container input:checked ~ figure input{
    z-index: 1;
}</style>
Ghоst написал(а):

Только вы же не особо понимаете, как это работает. Настроить под себя будет стоить больших усилий. Если есть знание английского - http://tympanus.net/codrops/2012/06/06/ … with-css3/  вот этот урок. Может, поможет.


вот, если ты хорошо знаешь английский попробуй разобраться - я учу немецкий, так что тут помогу разве что методом тыка и собственных разборок

0

8

даю время до следующей пятницы

0

9

даю время до следующей пятницы, потом в архив с возможностью возврата

0


Вы здесь » Кот » Архивы » ути, моя лапа


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