Category: дизайн

Category was added automatically. Read all entries about "дизайн".

El Murid

Записи

Рыбка-Вашукевич заявила о том, что у нее есть от 16 до 18 часов записей разговоров Дерипаски с другими людьми, касающимися выборов в США.

Рыбка

Возможно, что речь идет о том, чтобы США поторопились вытащить ее из таиландской тюрьмы и предотвратить депортацию в Белоруссию, откуда вернуться в Москву (добровольно или не очень, целиком или по частям) будет очень просто. Поэтому есть или нет эти 16 или 18 часов - вопрос отдельный. Хотя некоторые аналогии с записями майора Мельниченко явно прослеживаются.

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

https://zen.yandex.ru/media/el_murid/zapisi-5a9d9bb53dceb7d3de3bd571

El Murid

Китайские ракеты

Россия не считает угрозой развертывание китайских ракет у своих границ. В чем проблема? - недоумевает Песков. Китай - наш партнер, ракеты - они просто так, деталь интерьера. Туристический объект в дополнение к Великой стене.

Логика недоумения Пескова очевидна - для правящего режима есть только одна экзистенциальная ценность - личный кошелек. Угроза ему - вот это серьезно. Все остальное наших компрадоров не касается. Да и вообще - вы давно в России были? Тут стараниями песковых и их хозяев разруха давно такая, что десяток-другой ракет ничего нового не добавят, разве что слегка разнообразят пейзаж.
основной

Ландшафтный дизайн

Американская пресса весьма чутко реагирует на изменение обстановки. Нью-Йорк Таймс пару дней назад опубликовала статью и интерактивную карту на тему "Как из 5 стран сделать 14". По ссылке - полная версия карты.

Мне кажется, что как раз здесь комментировать нечего. Безусловно, это лишь журналистская выдумка - но как обычно, очень своевременная и показательная. А что именно она показывает - желания или возможности - покажет время. И скорее всего, оно не будет слишком уж длинным. Во всяком случае, для некоторых из 5 помянутых стран.



El Murid

Твори выдумывай пробуй

Мой хороший знакомый Алекс - дизайнер. Собственно, он и оформил этот журнал.

Это не баннер! Тюкать в то, что правее!!

К нему неоднократно обращались с просьбами подсказать, рассказать и показать - на что он, крепко подумав, сделал очень небольшое пособие (в некотором роде краткий курс) по оформлению своих журналов. Если кому будет интересно или просто любопытно - то справа на панели вы увидите от такой кликабельный баннер. Тюкаете - и переходите в пособие "Сделай сам".

Совсем простым оно не получилось, так что там внизу он оставил адресок, куда можно задавать ему разные вопросы. В общем - если есть желание покреативить - то пуркуа бы не па?

Пособие выложено еще не полностью, так что можно начать с того, что уже есть.

ПС. У кого-то, как я понял, сил тюкнуть не хватает, потому ссылка: http://el-murid.livejournal.com/613961.html
El Murid

Основной макет. Подложка


Рабочий пример http://tastytheme.livejournal.com/

Основной фон  

Фон макета заливаем однородной текстурой. Указываем параметр  fixed, дающий при прокрутке плывущий еффект верхних слоев поста и боковой панели. Кому не нравиться - убираем параметр. Указываем цвет заливки под текстурой, для варианта просмотра страницы в браузере, при отключенной графике. Указываем основной шрифт и его размер для макета.

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
background: url(http://pics.livejournal.com/tastytheme/pic/00030c9f) fixed #8f9595;
}

Верхняя часть. Заголовок.

Состоит из двух классов объектов .bodyheaderblock и .body-title

Здесь создаем некое подобие маркизы. В фотошопе делаем графический елемент в виде зубца, для заливки по горизонтали с прозрачным фоном.  Так как цвет заливки нам не нужен, делаем фон прозрачным. Устанавливаем размер верхней границы в значение 0, иначе у нас останется ненужная верхняя полоска и делаем на всякий случай прозрачной. Делаем отступы, также равными 0. Заливаем по горизонтали repeat-x готовым элементом зубца, с координатами  0% 0% выровненными по верхней границе класса. Получаем ровную заливку, плотно прилегающую к полосе меню.


.bodyheaderblock {
border-top: 0px solid transparent;
background-color: transparent;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background: url("http://pics.livejournal.com/tastytheme/pic/0003q4hz") 0% 0% repeat-x;
}

.body-title

Теперь мне нужно сместить заголовок на 130 пикселей  вправо с такими параметрами позиционирования - padding: 18px 0px 6px 130px;  и перед ним прилепить иконку.   Далее параметрами координат позиционирую иконку к шрифту - background-position: 100px 19px; Делаю шрифт вдавленным в фон - color: #666666; и -text-shadow: 1px 1px #D6D6D6; 

.body-title {
background: transparent;
background-image: url("http://pics.livejournal.com/tastytheme/pic/0003b976") ;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: 100px 19px;
font-family: ;
font-size: 12px;
font-weight: normal;
color: #666666;
text-shadow: 1px 1px #D6D6D6;
text-align: left;
padding: 18px 0px 6px 130px;
}

.bodyblock

Теперь мне нужно установить границы макета слева и справа. Я даю им отступ от края монитора в 100 пикселей.
Сверху 10, снизу 20 пикселей padding: 10px 100px 20px 100px; Сверху отделяю тонкой серой линией - border-top: 1px solid #dddddd; Снизу заливаю по горизонтали вторую часть маркизы, вторым изображением зубца, перевернутым в фотошопе на 180 градусов.   background: url("http://pics.livejournal.com/tastytheme/pic/0003p8kx") 0% 100% repeat-x; Таким образом подготовлена подложка под область поста и боковой панели.

Мне не нравится когда шрифт в посте разливается от края до края, делая таким образом пост трудно читаемым. Во вторых пропадает эффект подложки и пространства. Вид становится более плоским. Поэтому даем объектам отступы по краям, тем более что их можно использовать дополнительно.

.bodyblock {
border-top: 1px solid #dddddd;
border-bottom: 0px solid #dddddd;
padding: 10px 100px 20px 100px;
background-color: transparent;
margin: 0px 0px 0px 0px;
background: url("http://pics.livejournal.com/tastytheme/pic/0003p8kx") 0% 100% repeat-x;
}

Нижняя часть. Подвал.

.pagefooterblock

Аналогично баннеру делаю изображение для подвала и на этом заканчиваю подготовку общего фона.

.pagefooterblock {
text-align: center;
padding-top: 6px;
padding-bottom: 0px;
background-color: #323232;
font-family: ;
font-size: 12px;
color: #777;
margin-top: 0px;
border-top: 0px solid #dddddd;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("http://pics.livejournal.com/tastytheme/pic/0003eryk");
height: 120px;
}



Далее будем разбираться с областью поста.

El Murid

Анимированое меню

Далее рассмотрим область верхнего меню темы и слегка его анимируем. Анимацию я вставлю в этот блог, что бы далеко не надо было ходить. В разных браузерах его поведение будет разным. В Chrome и FireFox оно движется, в Opera только подсвечивается шрифт. Остальные не проверял. Оригинал http://tastytheme.livejournal.com



Наводим мышь на свободную область меню, в стороне от активного текста меню и определяем название класса к которому принадлежит меню. В данном случае - .header-menu. Так как меню относится к обыкновенному строчному элементу, то высота его определяется высотой строки - line-height.


Collapse )
El Murid

Инспектор объектов. Делаем баннер

Часть I - Дизайн в ЖЖ. Вводная. Адаптивный дизайн 
Часть III - Анимированое меню

Еще раз повторюсь. Смысл постов в том, что не все дизайнеры. Люди зачастую пользуются ужасным дизайном просто потому, что у них нет выбора. Собственно для того и создана возможность применения своего уникального дизайна к теме. Да и для разработчиков нет смысла особо стараться. Главное что написан функционал. Каждый имеет возможность все переделать для себя. Вскрытие особых секретов не подразумевается. Камрады дизайнеры могут спокойно проходить мимо.

Теперь будем выпрямлять вот эту кракозябру.



Рассмотрим тему, созданную для всеобщего пользования. Рабочий пример http://tastytheme.livejournal.com/



В ходе ковыряния в Опере, да и чтобы особо не заморачиваться, я ее назвал Dragonfly  и создал ей логотип. :))) Далее совершенно отвлеченно порыбачил в сети на предмет графики. Вот что нарыбачил.

     

Фотошоп для меня обычное дело, поэтому я немного покреативил и создал баннер и логотип. Листочки какао остались у меня от прошлого дизайна http://six.strings4guitar.com/ Там все заброшено из за ненужности. Функционал темы устарел и под новой версией Вордпресс перестал работать. Я их просто адаптировал к новой идее.





Тем, кто не дружит с фотошопом, проще найти годный материал для себя или попросить друзей подготовить что то по вашему желанию. Далее будем рассматривать данный материал сверху вниз, под микроскопом.

Начнем с рассмотрения основных объектов макета. Подготавливаем себе открытое окно, для помещения туда CSS
кода. Заходим в своем аккоунте в раздел меню - Журнал ->Стиль журнала. Справа вверху -> Настройте свой стиль. Слева выбираем вкладку Custom CSS.  Справа выбираем опцию - Use layout's stylesheet(s) - в значение - YES.







В пустом окне Custom Stylesheet собираемся немного пошаманить. Открываем дополнительную вкладку с адресом своего журнала для мониторинга результата. Я открываю в Opera. 

Основная схема макета (Делаем баннер)

Наводим курсор мыши на заголовок и правой кнопкой вызываем меню. Выбираем - Inspect element. Загружается инспектор объектов и мы видим такую картину. Сверху помеченный нами объект. По левой стороне содержимое кода страницы. Справа CSS код объекта.

Collapse )
El Murid

Дизайн в ЖЖ. Вводная. Адаптивный дизайн



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


Совершенно случайно зайдя в ЖЖ, я также совершенно случайно наткнулся на  блог Анатолия, когда ему исполнилась только-только от роду неделя. Через некоторое время я создал себе аккаунт в ЖЖ и решил посмотреть, что это за зверь и с чем его едят. Пересмотрев все опции и настройки на бесплатном аккаунте, мне стало скучно. Единственное что заинтересовало - то что у ЖЖ есть возможность дополнительного оформления, где собственно можно весь дизайн переиначить под себя. Написав письмо Анатолию и получив ответ, мы решили, что лучше избавиться от кислотного дизайна и попробовать создать что-то свое. Какое-то время поэкспериментировав с ЖЖ, стало понятно что нужно отказаться от излишеств его полосатости и кричащего цвета, так как формат журнала предполагает скорее формат новостного агенства, нежели личный блог, о том о сем. Через некоторое время мы избавились от ненужных  элементов и постарались сконцентрировать внимание читателя исключительно на  содержании. К сожалению, Java Script в ЖЖ не поддерживается и пришлось выворачиваться посредством CSS.

В основном тема будет касаться бесплатных аккаунтов. Различие платного и бесплатного аккаунта только в том, что в платном можно создавать собственные слои и применять их к дизайну дополнительно. Ну и остальные фишки, которые к теме не относятся. Это не особо актуально для большинства и поэтому будем рассматривать вопросы, доступные для всех.

Рекомендую обязательно ознакомиться для начала с этими русскоязычными ресурсами: yoksel и journals_covers. Там достаточно хорошо и подробно разжевана эта тема, материала которой может хватить многим, ну а я, чтобы не повторяться, попробую рассмотреть другие вопросы и возможности, применимые в Веб и адаптированые к ЖЖ.

Макет ЖЖ будет рассматриваться на основе темы Smooth Sailing. С остальными характеристиками и возможностями макетов можно ознакомиться по этой ссылке http://journals-covers.livejournal.com/57944.html#cutid1

Парочка советов

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

Вариант с Tumblr. Подписываетесь на аккаунт. Создаете свою пустую страницу с тестовым постом. Выбираете дизайн себе по душе и зайдя на страницу кода, бессовестно копируете CSS, применяя фрагменты кода к своим объектам.

Так же, любой (почти) понравившийся вам стиль объекта в сети, можно исследовать с помощью  инспектора и скопировать его код для дальнейшей корректировки.


Что нужно для начала?

Для начала нужно научиться идентифицировать объекты классов в ЖЖ и описывать их свойства. Для этого я использую инспектор объектов DragonFly, встроенный в Opera, либо Firebug, который можно установить в виде add-on для FireFox и Firebug Lite для Chrome. Для того чтобы установить в Chrome, идем по ссылке https://getfirebug.com/releases/lite/chrome/. Для Firefox http://getfirebug.com/swarms/Firefox-11.0/



Далее, правой кнопкой мыши над нужной областью, вызываем меню и выбираем - Inspect element, Inspect with Firebug Lite. Каждому по вкусу. Смотря кто чем пользуется. Инспектор объектов в Opera для меня более предпочтителен, так как он более развит и интерактивен в отличии от Firebug, но не суть. Сейчас Firebug обновился, но как говорится - дело вкуса. В принципе приходится пользоваться всеми, чтобы быть в курсе обновлений. Здесь я буду пользоваться инспектором Opera - DragonFly. В остальных, в принципе все идентично.

Текстовый редактор NotePad ++ для редактирования HTML и CSS разметки, незаменимый помощник програмистов.
При сохранении фрагментов кода в нужном формате, подсвечивается синтаксис и в больших фрагментах оного легче отделять нужные елементы. HTML код сохраняем как файл .html, CSS код сохраняем как файл .css
Иногда короткие фрагменты можно не сохранять, а просто править, но тогда подсветка работать не будет, так как редактор не определяет принадлежности кода к какому либо формату и работает как с простым текстовым файлом.
Чем он примечателен? Тем что тихо сидит в трэе, не грузит процессор и все незакрытые сохраненные файлы, при перезапуске системы открывает как и было раньше. Остальные его достоинства нам здесь ненужны.

Notepad++
Нужен какой нибудь онлайн генератор градиентов и color picker. В сети их полно. Выбираем по вкусу. Можно пользоваться несколькими. Я использую ColorZilla. Встраивается в Chrome и Firefox как add-on. Можно не встраивать внутрь браузера как расширение и попросту пользоваться онлайн версией. Или что нибудь попроще для начала. Что то вроде CSS3 PIE. В ColorZilla приходится стирать фрагменты кода, которые в ЖЖ работать не будут и будут заваливать весь стиль журнала в версию по умолчанию. 

Для облегчения жизни, хорошо бы иметь какой нибудь WYSIWYG HTML редактор. Но можно обойтись и без него. Тем кому это интересно, найдет сам. Я лично пользуюсь DreamWeaver.

Хороший интерактивный справочник по CSS http://www.w3schools.com/cssref/default.asp




P.S. Я сначала хотел закрыть комментарии к постам по этой теме, но, подумав, изменил мнение, так как, совершенно нечаянно можно самому наделать ошибок в коде и затем, без обратной связи, люди будут биться головой о стену и недоумевать - почему что-то не получается? Время от времени посты будут мониториться. Так же можно сбрасывать вопросы на почту elmurid.press@gmail.com. Гарантии массовой поддержки нет никакой, ввиду занятости. Поэтому лучше научиться думать индивидуально.



На этом подготовка закончена. Можно приступать к раскуриванию трубки и начинать креативить.

Часть II - Инспектор объектов. Делаем баннер 
Часть III - Анимированое меню