^_^

[Kirsi-kan]

Я закончила! Ура, я наконец-то закончила свой третий по счету (из сложных) дизайн!
Вышло на 90% так, как я планировала. То есть я жутко довольна))))
Получилось практически всё, даже то, что казалось невозможным
Правда есть пара подводных камней. О них чуть ниже и со скриншотами.

Картинка конечно извращенская, но мне жуть как нравится *_*
Из Ламэнто *_* Правда я недавно говорила, что этот пэйринг я не переношу.
Да, но стоило этому старикану сменить прикид, и он меня покорил *_*
Но честно говоря до этого момента я еще не дошла )))))) Спойлер так сказать.

Начнём презентацию)))

WARNING: много больших скриншотов!

Вот так отображается на экранах с разрешением 1024х768. Это с компа скрины.
Вариант, который мне нравится больше всего, кстати.
Картинка обрабатывалась в фотошопе, кнопки тоже.
Потом было много мороки с ними



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



Конец страницы. По обеим сторонам экрана располагаются те же самые герои))
На скрине видны полосы на коричневом - это глюк скрина. Цвет сплошной.




А вот так я вижу с ноутбука, который сейчас использую намного чаще. Экран 1600х900.





И низ. По-прежнему строго по обеим сторонам В разлучке.
По-моему слишком далеко, но сойдет))




У меня нет, но у остальных пользователей в углу верхней картинки отображаются две кнопочки.
Вообще-то по коду их три, но одна из них почему-то никак не хочет работать.
Так что U-mail мне послать можно со страницы профиля)))
Ссылка на профиль - на моём нике в сердечке ^_^

Левая кнопка - "удалить из избранного". "Добавить" будет без крестика (логично?)))
Вторая - подписаться на дневник по e-mail. Я сама часто так подписываюсь, так что надо.



Моя гордость - панель меню! А точнее то, что над ним))
Заменила ссылки кнопками, но очень долго искала способ изменить отображение непрочитанных комментариев и сообщений. В css-сообществе нашла совет по поводу ссылки "мой дневник". Поставила туда "сердечко".
А вот с мэйлами и дискуссиями этот номер не прокатывал... Пришлось Лене ломать голову самой.
И каким-то чудом ей всё в итоге удалось. О_о
Подумываю, кстати, написать в сообщество о том, как я сделала.
По-моему ответа на этот вопрос там все же не было.



А вот теперь о подводных камнях. Всё красиво до тех пор, пока у пользователя есть свой дневник -_-
Потому что если его нет - не будет и кнопочек "мой дневник" и "новая запись".
И будет смотреться вот так:


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

И на самом деле еще много всего надо бы поправить, но меня уже морально не хватает...

@темы: картинки, дизайны

Comments

[virtual flash]

ууух, красотища *О*
он просто огроменный!
и ааа, мое любимое меню сверху с кнопочками, обожаю)

я прям готова тебе заплатить за диз, у тебя они просто жутко классно получаются!)))

[Kirsi-kan]

Цукигэ, а мне было так любопытно, как ты оценишь))
Спасибо)))

Меню с кнопочками да, мне тоже очень нравится, и вот вроде бы научилась его делать.
Но, как видишь, с ним тоже проблем хватает. Буду думать над решением этих задачек)))
**ну вот, у меня еще куда-то "цитата" пропала **

Когда усовершенствуюсь в дизайнерском деле и буду уверена в своих силах, обязательно тебе что-нибудь сделаю *_*
У тебя, кстати, какое разрешение экрана?

[virtual flash]

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

обожаю такие огромные дизы, с большим экстратопом и экстработтомом))

[Kirsi-kan]

А, ну раз 1024х768, тогда понятно

я вот свой новый уже недели две "делаю")

Да? А когда закончишь? ^_^ Хочу посмотреть)))

мне ооочень нравится, молодец!

[virtual flash]

Kirsi-kan не знаю... я не знаю, как лучше верхнее меню сделать.
а ковыряться вспоминать, как прописывать, лень))

[Kirsi-kan]

Лис с разноцветными глазами , спасибо большое)))

Цукигэ, а что хочешь получить в итоге? Эскиз есть?))

[virtual flash]

Kirsi-kan ну вообще тупо убрать ненужное и чтобы оно не выскакивало, а остались просто кнопки).
эскиза как такового нет, есть только экстратоп ну и задний фон в принципе. я просто сижу и меняю в уже имеющейся схеме цвета и картинки. но тут картинка короче, и делать меню справа\слева неудобно.

[Kirsi-kan]

Ммм, ну вообще чтоб ненужные нункты меню убрать, надо указать {display:none} после ненужного.

А кнопки прописываются вот так:

#myDiaryLink b {display:block; width:100px; height:45px; line-height:500px; position:absolute; top: 75px; left:175px; overflow:hidden; background: url('/userdir/1/0/3/2/1032369/62395682.png') no-repeat !important;}

Это для ссылки "мой дневник". Меняешь высоту и ширину изображения кнопки, "line-height" вообще не знаю что такое, не разбиралась даже, но во всех подобных кодах этот параметр присутствует в значении 500, далее положение кнопки, и собственно ссылка на изображение.

Чтоб поставить картинку на счетчик новых комментариев (сердечки с цифрами у меня), для кнопки "мой дневник" используется следующий код:

#myDiaryLink .count_box span {position: absolute; top: 100px; left: 135px; }
 #myDiaryLink span.count_box a {background:url('/userdir/1/0/3/2/1032369/62411582.png') no-repeat; display:block; position: absolute; top: 38px; left: 210px; width: 35px; height:40px; text-align:center; line-height: 30px; font-size: 12pt !important; color: #ffffff;}

Тут очень замудрёно, признаюсь, подгоняла всё методом тыка)) Не помню, за что отвечает первая строчка -_- Но без неё не работает. Во второй же надо поменять ссылку на изображение, позицию на странице, длину и ширину изображения, а так же настройки для самих цифр кол-ва новых комментоариев. text-align:center - отцентровка, line-height - высота строки (этими параметрами я поставила цифру ровно посередине, по умолчанию же она будет в верхнем левом углу изображения), остальное по усмотрению.

Теперь что касается других кнопок. Все, что выше - лишь для ссылки "мой дневник", в этом и была проблема. Для остальных кнопок надо использовать немного другой код.
Замена ссылки изображеним на примере "U-mail":

#umailLink a {width: 100px; height: 45px; line-height:500px; overflow:hidden; background: url('/userdir/1/0/3/2/1032369/62395718.png') no-repeat; position: absolute; top: 74px; left:366px; }

Тут всё так же, заменяешь необходимые параметры.

А счетчик прописываешь вот так:

#umailLink .count_box span {position: absolute; top: 100px; left: 335px; }
 #umailLink span.count_box a {background:url('/userdir/1/0/3/2/1032369/62415425.png') no-repeat; display:block; position: absolute; top: 38px; left: 400px; width: 35px; height:40px; text-align:center; line-height: 30px; font-size: 12pt !important; font-style: normal; color: #ffffff;}

Аналогично.

На первый взгляд всё одно и то же, но не совсем. Как трудно объяснить, когда сама не до конца понимаю -_-
В общем это работает
По крайней мере у меня.

[Kirsi-kan]

Хотя это если как у меня. Есть и другие способы. Например как тут:
ipicture.ru/uploads/20101118/RxSJo6t6.png
Насколько я помню, тут не кнопки, а просто ссылки отпозиционированы и им приписан фон.
Тоже неплохой вариант)))

А еще я видела боковое меню с выпадающим списком! Жесть, кому-то это таки удалось О_о
Своими глазами видела)) **и внаглую стащила код, чтоб потом поизучать**))
Смотрится вот так:
ipicture.ru/uploads/20101118/uNIL1ftI.png

[virtual flash]

Kirsi-kan ооо, как все подробно!
спасибо, будет время - сяду разберусь таки)))

[Kirsi-kan]

Цукигэ, всегда пожалуйста)) Если заинтересуешься двумя другими вариантами (которые на скринах), я пример кода дам.
(ща я слишком сонная для этого)))

[virtual flash]

Kirsi-kan

[.соран]

великолепно (*´ω｀ﾉﾞ

[Kirsi-kan]

Tracey Berkowitz, спасибо ^^

[.соран]

пора бы и мне осваивать фш ._.

[Kirsi-kan]

В интернете полно уроков
Я с них когда-то и начинала.
А потом мангой занялась, и пришлось дополнительно совершенствоваться))

[.соран]

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

[Kirsi-kan]

Это да.. когда слетает прога, всегда мучаюсь с переустановкой.
Но все равно пиратками пользуюсь))

[.соран]

еще надо научиться коды прописывать
это тоже в фш делается?:о я в этом вообще не разбираюсь (￣△￣

[Kirsi-kan]

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

[.соран]

спасибо большое (≧ω≦
я правда еще не знаю когда займусь этим)

[Kirsi-kan]

Ну вот когда займешься - обращайся)))

[.соран]

хорошо ＾＾