FAQ

[La_mignonne]

FAQ

Вопросы по дизайну

• Как установить дизайн с кодом CSS/для платного аккаунта?
• Как установить простой дизайн/для бесплатного аккаунта?
• Я установил(а) новый дизайн, но у меня все равно отображатеся старый диз. Что делать?
• Как сделать скриншот (скрин/превью) дизайна?
  
• Элементы CSS дизайна

Вопросы по работе сообщества

• Как заказать у вас дизайн?
• Сколько стоит CSS дизайн?
• Мне нужен дизайн на определенную тематику, как его быстрей найти?
• Как разместить здесь свой дизайн? (Как стать мастером сообщества?)
• Как разместить рекламу?

Полезные ссылки

• Типичные ошибки новичков

Задать свой вопрос
можно по u-mail  La mignonne -> Задать

 

Comments

[La_mignonne]

Уже нервно реагирую на тысячный вопрос "а куда пихать код, который вы дали?? ааа памагити!".
Читайте, пожалуйста, инструкцию внимательно! Там есть ответы на все, что вы меня спрашиваете, да еще и в картинках!
Я дополнила инструкцию дополнительными картинками и словами (3.02.10)

Как установить дизайн с кодом CSS/для платного аккаунта?

Читать внимательно и много раз

Ответ на вопрос: "Что эта за код и куда его деть???"

Дизайны, к которым прилагается код - это дизайны для платных дневников! Называются такие дизайны - CSS Поэтому если хотите установить себе такой дизайн, то для начала платный сервис нужно подключить. КАК ПОДКЛЮЧИТЬ? заходим в раздел Настройки (в меню) -> вкладка "Дополнительные сервисы" -> вкладка "Набор платных сервисов" (ставите там галочки на пакете "Простой" и в доп. сервисах ставите галочку напротив графы CSS -> Посмотреть и оплатит счет. (Как положить деньги себе на счет написано в Настройках -> Пополнить счет) КАРТИНКА

 

Подключили. Далее:

• Все предоставленные автором дизайна картинки , нужно сохранить себе на компьютер, а потом загрузить к себе в Библиотеку изображений (в колонке меню "Мой дневник" - ссылка "Библиотека изображений" )
(Библиотека изображений - сокращенно БИ)


• Для загрузки аватара(фото) зайдите в раздел "Настройки" -> "Настройки дневника" -> "Эпиграф, фото, список ПЧ". Он грузится там, где написано "Файл с фотографией", нажимаете "Обзор", выбираете у себя картинку, которую хотите загрузить, нажимаете Ок, затем "Загрузить". Потом нажимаете кнопку "Сохранить" (над словом"Эпиграф" ). Готово.

• Далее, нужно открыть окошко, куда будем вставлять код
КАК? Заходите в "Настройки" -> "Дизайн дневника" -> "Библиотека оформлений (список ваших оформлений)" -> "Новое оформление" (в окошке прописываете название дизайна, любое - какое вам нравится) -> "Добавить" (ссылка правее от названия).
Далее, выбираете галочкой это вновь созданное офрмление -> кнопка "Редактировать" (правее, между "посмотреть" и квадратиком скрестиком).

 

 

В КАРТИНКАХ
1. 2.

 

 

• Теперь переходим непосредственно к вставке кода и настройкам
  
  а) Цвета дизайна редактируются во вкладках с соответвующими названиями (Шрифт, цвета Текста и пр.)
  Стандартный фон загружается в вкладке "Фоновая картинка" -> Обзор -> Выбираете картинку -> ок. Затем нажимаете кнопку "Сохранить".
  Если автор предоставил не стандартный фон (что чаще всего), а прописал его в коде, то с ним нужно поступить как и с другими картинками - сохранить на комп, загрузить в БИ и потом вставить в код.
  Если автор дизайна указал цвета не для всех элементов, значит эти элементы не нужно указывать вам самим! Оставьте их пустыми!
  
  б) CSS код дизайна, который вы хотите установить, вставляете в окошко "Стили" (находится там же, под стандартными настройками).
  В коде автор дизайна указывает место, куда вставлять картикни, которые вы себе сохранили и загрузили в свою БИ.
  Выглядят эти строчки в коде примерно так: #extratop {background: url('ЭКСТРАТОП'}. Ищите такие строчки с названиями и вот именно туда, где обозначено название элемента и нужно вставлять ссылку!

КАК ВСТАВЛЯТЬ ССЫЛКУ 1. Во-первых, убедитесь, что вы вставляете ссылку на изображение из своей БИ, а не ту, которую дал автор!  2. Во-вторых, ссылка должна быть не полностью! Вам нужно скопировть только ее часть! Какую именно часть копировать? ЭТУ: /userdir/././././......./......... .jpg (вмеcто jpg на конце могут быть и другие буковки, не пугайтесь!) Таким образом, правильные ссылки должны выглядеть так и только так: #extratop {background: url('/userdir/2/2/5/9/22591/42072719.jpg')} Вот такой адрес ссылки неправильный!!!! #extratop {background: url('http://static.diary.ru/userdir/2/2/5/9/22591/42072719.jpg')}

В КАРТИНКАХ

3. 4.

Далее вы нажимаете на кнопку сохранить и дизайн готов.

 

 

 

"> Очень важно!!!

Если вы нажали сохранить, а у вас все ссылки изчезли и картинки не отображаются, это значит, что вы неправильно вставили ссылки!!!!

Прочтите еще раз инструкцию и повторите

Очень важно 2!!!

Не надо сразу после вставки кода в окно "Стили" нажимать кнопку Сохранить"

Нужно сначала вставить в код ссылки на картинки, а потом уже нажимать кнопку сохранить!!!!! Иначе у вас пропадут в коде пометки, куда вставлять какие элементы.
Но если вы уже так сделали (сохранили, не вставив ссылки), то удалите код из окошка "Стили" и вставьте его заново, но в этот раз сделайте все по инструкции.

Очень важно 3!!!
Изменяйте текст в коде очень аккуратно! Иначе у вас пропадут/исказяться элементы дизайна!
Например, при замене слова "Экстатоп" в коде на ссылку, не удаляйте одиночных кавычек, иначе ничего отобржаться не будет. То есть, url('экстратоп') это не тоже самое, что и url(экстратоп), в кодах любая лишняя/недостающая запятая может быть ошибкой и служить проблемой в отображении и правильности кода css дизайна!)

[La_mignonne]

Как установить простой дизайн/для бесплатного аккаунта?

Читать

Для начала сохраните все данные вам картинки на свой компьтер.
Для установки эпиграфа и фото(аватара), зайдите в раздел Настройки -> Настройки дневника -> Эпиграф, фото, список ПЧ.

Далее, аватар(фото) грузится там, где написано "Файл с фотографией", нажимаете "Обзор", выбираете у себя картинку, которую хотите загрузить, нажимаете Ок, затем "Загрузить". Потом нажимаете кнопку "Сохранить" (над словом "Эпиграф"

Эпиграф вставляете в окошко под соответствующим названием "Эпиграф". Как? Выбираете кнопочку "Загрузить/изменить изображение" (квадратик с нарисованным зеленым деревцем на бело-голубом фоне) - вкладка "Добавить изображение" -> Обзор -> Выбираете картинку -> Добавить -> Затем добавленную картинку "Вставить". Затем нажимаете на кнопку "Сохранить" под полем/окошком "Эпиграф".

Для установки фона дневника и редактирования цвета элементов дизайна (ссылок, оффтоп, текста и пр), зайдите в Настройки -> Дизайн дневника -> Выберите ваше оформление -> кнопка "Редактировать" (правее, между "посмотреть" и квадратиком с крестиком). Далее, цвета редактируются во вкладках с соответвующими названиями (Шрифт, цвета Текста и пр.), а фон во вкладке "Фоновая картинка" -> Обзор -> Выбираете картинку -> ок. Затем нажимаете кнопку "Сохранить".

[La_mignonne]

Я установил(а) новый дизайн, но у меня все равно отображатеся старый диз. Что делать?

1. Зайдите в настройки -> Дизайн дневника. И из библиотекиоформлений выберите тот дизайн, который вам нужен (только чтосозданный, например. Поставьте галочку рядом с ним) и нажмите на кнопку"Сохранить". Обновите страницу клавишами Ctrl+F5.

2. Если это непомогает, значит вам нужно почистить кэш в браузере. Закройте все окна,презапустите браузер, затем выберите в Меню браузера -> Инструменты-> Очистить личные данные. Можете опять перезапустить браузер.
Обновляйте страницу клавишами Ctrl+F5.
Можете проделывать эту процедуру до тех пор, пока не удалятся старые данные и не появится новый дизайн.

3. Еслии это не помогает, значит Вы что-то упустили в настройке дизайна инужно повторить внимательней или обратиться за помощью к кому-либо измастеров CSS (лучше к тому мастеру, кому принадлежит диз, который выхотите установить)

[La_mignonne]

Элементы CSS дизайна

В качестве примеров я буду использовать свои дизайны.
Итак, на скрине вы видите цифры около каждого элемента. Ниже будут описаны эти элементы под соотвествующими номерами.

1. Фон

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

Фон может двигаться вместе со всей страницей во время прокрутки, либо оставаться на месте.

2. Экстратоп

Экстратоп - это картинка, расположенная над блоком записей и меню. Как здесь. Меню можно передвинуть, и, как в предложенном примере, блок записей будет располагаться на всю ширину дизайна и экстратоп находится только над ним, а меню расположено на самом экстратопе (см. пункт "Меню")
Обычно, экстратоп делают размером 900px или 1000px. Поставить туда можно любую картинку и в любом варианте.

3. Блок с датой записи.

В данном примере он оформлен следующим образом: дата расположена по центру, задан цвет, чтобы выделить этот блок и разграничить посты записей. Можно использовать вместо цвета изображение, устанавливать различные цвета, размеры.

4. Оболочка записи.

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

5. Меню

Как я уже говорила, меню может располагаться под экстратопом - справа или слева, как тут. В нашем примере меню располагается на экстратопе, оно перемещено с помощью позиционирования ссылок. Таким способом пункты меню можно расположить в любом удобном для месте в дизайне. Например, тут ссылки расположены в специальных прямоугольниках на экстратопе.
Так же, существует выпадающее меню, как здесь. В этом случае я расположила меню в верхней части эпиграфа. При наведении мышки на любой блок ссылок, появится окошечко со вcеми остальными ссылками, входящими в этот блок. Такое меню удобно тем, что занимает очень мало места. Его также можно расположить в любой части дизайна.
Ссылки в меню можно редактировать по размеру, цвету, шрифту. Также они могут менять цвет при наведении на них мышкой.
Можно убрать ненужные вам пункты меню, можно выделить цветом или картинкой нужные пункты меню. Можно выелить цветом или картинкой целый блок ссылок, например так.
А так же можно поставить у ссылок небольшие картинки. Как, например, поставлены здесь желтые кружочки у ссылок "Мой дневник" и "Главная страница".
Название ссылок вы можете поменять на свои. Например, название ссылки "Мой дневник" вы можете изменить на название "My favourite diary".
Так же, ссылки вы можете заменить картинками. Соотетветственно, ссылка "Мой дневник", к примеру, в вашем дневнике будет отображаться в виде картинки, которую вы захотите и поставите.

6. Эпиграф

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

7. Блок ссылок

Здесь располагаются ссылки "Комментировать", "Подписаться" и тд.
Для этого блока так же можно задать фон в виде цвета или картинки, изменить стиль ссылок, поставить около ссылок картинки или заменить сами ссылки картинками, изменить название. (см. пункт "Меню").

8. Фон записи

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

9. Разделители

Ставятся для разграничения записей, можно использовать любую картинку, текст. В общем, экспериметрировать)))
 

10. Экстработтом

Располагается в конце обшего блока с дизайном, после последней записе на странице, под количеством страниц в дневнике.

[La_mignonne]

Как заказать у вас дизайн?

В эпиграфе есть ссылка "Заказать дизайн". По ней вам откроется страница с требованием к заказу и списком мастеров, у которых вы можете сделать заказ в их спец. темке.

Обращайте внимание на пометки рядом с никами мастеров.
Важно: остальные мастера не берут заказы, не пишите им в личку!

[La_mignonne]

Сколько стоит CSS дизайн?

Если дизайнер выложил диз сам (и без пометки, что это заказ) и приложил к скриншоту настройки - то дизайн бесплатный и его можно брать всем! По правилам сообщества, вы должны только поставить баннер на наше сообщество в своем профиле/записи/эпиграфе (выбор места на ваше усмотрение). Баннеры брать тут

Если же вы хотите заказать дизайн персонально для себя, то это будет стоит от 20@рублей. Цену, в зависимости от сложности кода, дизайнеры имеют право менять - вас об этом заранее предупредят.
Подробнее об этом тут

[La_mignonne]

Мне нужен дизайн на определенную тематику, как его быстрей найти?

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

[La_mignonne]

Как разместить дизайн в сообществе?

Читать

Если Вы хотите стать мастером в сообществе или если хотите разово разместить здесь свой дизайн, то Вам нужно получить разрешение на разовую публикацию (подробнее)

[La_mignonne]

Как сделать скриншот (скрин\превью) дизайна?

Читать

Итак, устанавливаем диз и теперь нужно сделать скрин.
Каким способом "сфотографировать" экран?
•| На каждом компьютере есть кнопочка Prt Sc (в правом углу на клавиатуре, над циферками))))
Жмем ее. Она фотографирует экран, ту часть, которую видите вы сейчас (т.е. не до последнего вашего поста, а только несколько записей, которые влезают в поле зрения на вашем мониторе - соответственно чем выше разрешение экрана, тем обширнее будет скрин)
•| Для Mozilla есть специальный плагин, делающий скрины с помощью нажатия одной лишь кнопочки - очень удобно.
Называется FireShot. Скачиваем, устанавливаем. Теперь у вас в браузере в правом нижнем углу появятся следующие кнопочки:

1 - иконка странички. Целая страничка означает, что программа сделает скрин страницы полностью, прямо со всеми записями на странице, скрин будет длинным. Для чего такой нужен? На некоторых разрешениях не видно без прокрутки вниз меню и фон. Тогда нужно будет сделать полный скрин и обрезать его до нужного размера.
Можно нажать на эту иконку, картинка поменяется на "половинку странички". В таких настройках программа сделает скрин такого же формата, как и с помощью кнопочки Prt Sc (см. выше).
2 - выбрали масштаб скрина, теперь жмем кнопочку №2. Программа предложит Вам ввести имя сохраняемого файла и выбрать путь сохранения. Сохраняйте куда удобней.

Все, сфоткали дизайн. Теперь приводим его в приличный вид.
Открываем фотошоп (или Paint, который есть на каждом компе)
Новый документ -> Вставить. Тепрерь перед Вам скрин.
Я для примера взяла скрин одного из выложенных в соо дизов - этот. Надеюсь, автор не обидится ^^
•| Сначала обрезаем до нужно размера скрин. Как лучше обрезать?
Должен быть виден фон ПОД меню (если меню сверху, то по бокам фон должен быть виден). Оставляйте столько фона, сколько считаете нужным для того, чтобы человек смог оценить всю красоту Вашего фона лишь по одному скрину.
Не оставляйте скрин длинным(высоким)! При создании превью он уменьшиться автоматически, сохраняя пропорции - т.е. скрин будет уменьшенным и плохо будет видно его содержимое!
И немного фона по бокам - на дайри обычно стандартные расстояния от правых-левых краев, не нужно из обрезать!
Должна быть видна запись.
И еще - обрезайте скрин от частей браузера! должен быть виден только дизайн, а не открытые на вашем компе вкладки и другие элементы.
•| Теперь нам нужно замазать ник, название дневника, лишний текст. И рекламу!!!!!
Берем инструмент "Пипетка" . Кликаем ей на цвет фона записи рядом с текстом, чтобы подобрать идентичный цвет и аккуратно и незаметно замазать лишнее. Выбрали, теперь берем инструмент "Кисть" , жесткую, небольшого размера. Цвет у Вас уже выбран. И начинаем аккуратно замазывать текст и баннеры-ссылки рекламы.
→ Совет: Замазывайте также все аватары и прочие картинки, которые у Вас имеются в тексте! Они очень нагромождают, отвлекают, делают диз пестрым и перенасыщенным элементами!
→ Совет 2: Многие "заблюривают"/размазывают элементы. Да, текст становится нечитабельным, НО выглядит это неаккуратно. Все цветные картинки, текст - это все остается, только теперь еще и размазанным пятном! Выглядит грязно! Поэтому советую все-таки замазывать кистью все ненужные элементы.
Все сделали, сохраняем на компьютер. Не изменяем размер скрина вообще, ни на каком этапе!

Теперь у Вас аккуратный скрин, без отвлекающих деталей.
Следующий шаг - загрузка для создания превью.
Открываем Radikal.ru (или прочие сайты, позволяющие создавать превью).
Выбираем Ваш файл-превью, снимаем со всех настроек галочки (!), ищем поле "Создать превью" и ставим туда значение (400px стандарт на всех наших конкурсах) -> Загружаем.

После загрузки появится наше изображение и КОДЫ на это изображение на выбор. Чтобы вставить скрин в 400px, который будет увеличиваться до оригинального размера при нажатии на него, Вам нужно выбрать код под заголовком "Превью - увеличение по клику". Выбирайте этот код, содержащий заветные буковки HTML.
Копируете и именно его используете при пересылке или вставке в пост (вставлять нужно в редактор HTML).



Для сравнения:
ДО

ПОСЛЕ


ПОСЛЕ приятней для глаз, правда? не забывайте, что встречают по одежке)) если людям понравился диз уже на этапе скрина, это уже большой плюс))

[La_mignonne]

Типичные ошибки новичков

Читать

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

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

Примеры

Как делать НЕ надо.
dizain-by-shokolad.diary.ru/p158504843.htm
dizain-by-shokolad.diary.ru/p141092006.htm
dizain-by-shokolad.diary.ru/p140754194.htm
dizain-by-shokolad.diary.ru/p142245455.htm
dizain-by-shokolad.diary.ru/p50087017.htm
dizain-by-shokolad.diary.ru/p55358143.htm
Один исходник, скругленные/размытые края, никакой/самый минимум обработки. Это очень милые дизайны, с приятными цветами, но такие "голые" дизайны котировались года 2 назад в нашем соо. Сейчас же тааак много возможностей, куча уроков доступных, давайте не увлекаться прошлым веком.
Сейчас даже мастерам не разрешается публиковать такие дизайны, а уже для проб или разовой публикации такие дизайны не надо делать.
Лучше посидите два дня вместо одного, сделайте 1 диз, а не 3, но постарайтесь, поэкспериментируйте.

Что можно изменить
Простой пример, где к размытым краям добавлен клипарт.
dizain-by-shokolad.diary.ru/p161289791.htm
В нем уже плюс в том, что автор подыскал цветы-клипарт в тему картинке исходнику, использовал текстуру на картинке.
dizain-by-shokolad.diary.ru/p149268329.htm
Скругленные края у картинки, из обработки - цвет + подложка и клипарт. И дизайн уже выглядит более интересным и гармоничным.
dizain-by-shokolad.diary.ru/p137354336.htm
Текстуры + кисти и обычным исходник "заискрился", хотя и простая форма и ничего лишнего.
dizain-by-shokolad.diary.ru/p138371681.htm
Опять же прямоугольная картинка, но клипарт в подложке, немного на самой картинке и исходнил ожил.

Кстати о количестве картинок, используемых при создании эпиграфа.
Для конкурсов чаще всего мы просим использовать не менее 2-ух, чтобы хоть как-то подтолкнуть участников экспериментировать с совмещением картинок, искать способы их обработать вместе и так далее. И в принципе это верно, интересно рассматривать эпиграф, когда там несколько картинок, какой-то клипарт, интересно смотреть, как это совмещено, что подобрано и тд.
Но это не значит, что использование в эпике одного исходника не интересно и запрещено. Просто обрабатывать всего одну картинку тоже нужно уметь и делать это грамотно.
Приведу в качестве примера работы Notuile, которая практически во всех работах использует один исходник, но подбирает к ним тектуры, клиапрты, фоны, кисти и выглядит все в итоге красиво.
Ее работы - dizain-by-shokolad.diary.ru/?tag=3369782

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

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

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

[[ShokolaD]]

Как разместить рекламу

Читать

Вы можете обменяться с нами баннерами размером 45х45 (без анимации), который будет расположен на главной странице сообщества. Соответсвенно Вы также размещаете наш баннер на главной странице Вашего ресурса.
Если на Вашем ресурсе более 1000 читателей, то реклама размещается на взаимном баннерообмене.
Если менее - размещение баннеры платное. Месяц - 150 епонов.

Размещение рекламы отдельной записью в сообществе не приветствуется.
Единственный вариант - если запись по тематике сообщества, возможно размещение записи на 3 дня (без поднятия записи), стоимость 150 еп.