ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

Дата и время: начало 28 апреля в 16:00 по МСК;
Если у вас возникла идея создать ролевую игру, сообщество любителей собак или форум для киноманов,
но не знаете с чего начать и что делать, не беда! Мы здесь чтобы помочь.

Подробности

GEMcross

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

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте • Предложения
Стать модератором • Отзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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

Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Архив устаревших тем » Как сделать дизайн форума? Все о создании стиля на примере Mybb форума

Как сделать дизайн форума? Все о создании стиля на примере Mybb форума

Страница:   1 2 3 4 5 6  

Сообщений 41 страница 50 из 54

1

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Устарело! новая версия здесь: Как сделать дизайн форума/сайта? Все о создании своего дизайна.

устарело

Уважаемые гости форума! Чтобы коды и навигация статье корректно отображались, зарегистрируйтесь на форуме.

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

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

От автора

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

Копирование статьи

КОПИРОВАНИЕ ЭТОЙ СТАТЬИ НА ДРУГИЕ РЕСУРСЫ РАЗРЕШАЕТСЯ ТОЛЬКО ПРИ НАЛИЧИИ ВОТ ТАКОЙ ВОТ НАДПИСИ В САМОМ ВЕРХУ (НАД СТАТЬЕЙ) И БЕЗ УМЕНЬШЕНИЯ РАЗМЕРА ШРИФТА!

Статья предоставлена форумом ForumDesign TS - Дизайн для форумов и техническая поддержка
Автор - Герда

Код:
[align=center]Статья предоставлена форумом [url=http://ForumD.ru/]ForumDesign TS - Дизайн для форумов и техническая поддержка[/url]
Автор - [b]Герда[/b][/align]

Источники информации и ссылки

Сторонние источники
Так сказать, список использованной литературы, который, само собой, заслуживает вашего внимания.

http://lenagold.ru/ - сайт с готовым клипартом (использовано для создания дизайна).
http://artfile.ru/ - на этом сайте выкладываются обои (использовано для создания дизайна).
http://ilovepsd.ru/ - замечательные советы по работе с макетом
http://www.wisdomweb.ru/ - на этом сайте есть отличные учебники по CSS и CSS3 с наглядными примерами
http://htmlbook.ru/ - шпаргалка по тегам HTML и свойствам CSS, всегда в нее подглядываю
http://www.google.com/webfonts - сервис Google для импорта красивых шрифтов на сайты

Внутренние ссылки
Чтобы не копировать сюда все то, о чем уже написано на ForumD.ru, в статье будет приведено масса ссылок на другие разделы и полезную информацию.

Каталог стилей - тут вы можете найти дизайн, по которому создана статья, взять его код, разобрать, собрать, перебрать и сделать с ним все, что угодно. Также имеются другие стили.
Уроки Photoshop - тут вы найдете массу приемов, которые могут вам пригодиться в создании дизайна
Все о photoshop - в этом разделе можно задать вопросы по работе в редакторе photoshop
Новый FAQ по дизайну и CSS - подробное описание шаблона дизайна для MyBB форума
Каталог CSS-кодов - здесь можно найти (или спросить) CSS-коды для дизайна.
Делаем GIF анимацию легче - урок photoshop по работе с форматом GIF
Таблицы в HTML - очень подробно о том, как сделать HTML код таблицы
Заготовки и клипарт для анимации - коллекция заготовок, которая может пригодиться при создании веб-анимации

Оглавление

[html]<a name="ogl"></a>[/html]
[html]&nbsp;- <a href="#1">Создание проекта дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#2">Соответствие дизайна тематике</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#3">Составление проекта дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#4">Поиск исходников</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       - <a href="#4-1">Подборка ссылок</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       - <a href="#4-2">Несколько правил подборки исходников</a><br>
&nbsp;- <a href="#5">Создание макета</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#6">Учимся работать с макетом</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#7">Создание вспомогательных слоев</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#8">Создание дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       - <a href="#9">Основы колоризации</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       - <a href="#10">Как делать макет ровным?</a><br>
&nbsp;- <a href="#11">Верстка дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#12">Как работает CSS</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#13">Инструменты для верстки: FireBug</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#14">Учимся правильно "резать" макет (правила работы с картинками для WEB)</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#14-1">Планирование элементов дизайна </a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#14-2">Формат изображений</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#15">Учимся вставлять фоновые картинки </a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#16">Составляем CSS-код дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#16-1">Верстка дизайна на mуbb форуме при помощи FireBug</a><br>
&nbsp;- <a href="#17">Некоторые трюки</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;   - <a href="#18">Создаем свои элементы HTML</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#19">Позиционирование в CSS</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#20">Делаем контейнеры для элементов дизайна</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#21">Делаем контейнеры для текста</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#22">Делаем красивые html-таблицы</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#23">Создание таблицы</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#24">CSS3: меньше картинок, больше кодов</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#24-1">BORDER-RADIUS</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#24-2">BOX-SHADOW</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#24-3">TEXT-SHADOW</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#25">CSS3 на примере таблицы</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#26">Свойство DISPLAY: задаем отображение элементов</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#26-1">Наглядные примеры и наиболее популярные применения свойства Display</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#26-2">Применение свойства DISPLAY на примере таблицы</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#27">Красивые заголовки и шрифты</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#27-1">Как работают шрифты в CSS (свойство FONT)</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#27-2">Картинки-заголовки (ДОЛОЙ ЭТУ БЯКУ!)</a> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#27-3">Красивые заголовки с помощью Google Web Fonts</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    - <a href="#27-4">Безопасные шрифты</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28">Анимация в дизайне</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-1">Создание анимации</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-2">Подгоняем анимацию под веб-формат</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-2-1">Размер анимации</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-2-2">Количество кадров</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-2-3">Меняем цикл анимации</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-2-4">Делаем Gif-анимацию легче</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-3">Встраиваем анимацию в дизайн</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-3-1">Используем z-index для порядка отображения элементов страницы</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  - <a href="#28-3-2">Как убрать прокрутку страницы (свойство overflow)</a>
[/html]

Обновления

23.04.2012 - львиная доля статьи дописана, глава [html]<a href="#12">Как работает CSS</a>[/html] откорректирована
25.10.2012 - увеличено оглавление для лучшей навигации то статье
26.10.2012 - в часть Как делать макет ровным? добавлен пункт "Выравнивание объекта относительно фона"
27.10.2012 - началась работа над трюком "[html]<a href="#28">Анимация в дизайне</a>[/html]", написано о создании анимашек.
29.11.2012 - добавлен пример использования безопасного шрифта в дизайне
07.12.2012 - дописана часть про встраивание анимации в дизайн
08.12.2012 - добавлено видео [html]<a href="#16-1">Верстка дизайна на mуbb форуме при помощи FireBug</a>[/html]

Теги: урок, photoshop, фотошоп, css, дизайн

Отредактировано Герда (17.07.13 22:37)

+8

41

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

хорошие примеры +1
есть пнг-картинки, которые можно было бы сделать в jpg

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

0

42

  • Автор: Сакура
  • Бестелесный дух прошлого
  • Сакура
  • Уважение: +792

http://wolves.roleforum.ru/
надеюсь, админ не убьет, но диз мне его нравится

0

43

  • Автор: Пернатый
  • Бестелесный дух прошлого
  • Пернатый
  • Уважение: +351

http://rebornme.ru/
http://racket.rusff.ru/

+1

44

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Пернатый
Сакура

спасиб

особенно racket.rusff хорошо подходит как показательный

0

45

  • Автор: Rush
  • Бестелесный дух прошлого
  • Rush
  • Уважение: +798

Герда
показательный в качестве чего?

0

46

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Та-да-ДАМ!
собственно, добавлена вкусная весчь!

Верстка дизайна на mуbb форуме при помощи FireBug

Для наглядности предлагаю вам ознакомиться с данным видео.
Вы увидите:
  - как происходит верстка дизайна с нуля
  - как вставлять фоновые элементы
  - как добавлять в стиль новые селекторы страницы
  - как использовать функционал FireBug
  - как позиционировать элементы
  - (забегая вперед) как делать свои блоки для элементов дизайна

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

И, если у кого-то еще есть вопросы о том, как использовать FireBug - глядеть обязательно ;)

+1

47

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9804
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD
Rush написал(а):

показательный в качестве чего?

в плане косяков в картинках :)

0

48

  • Автор: Severa
  • Бестелесный дух прошлого
  • Severa
  • Уважение: +85

Будьте добры, помогите, пожалуйста, разобраться.
Еще до вашей статьи наткнулась на правильное замечание: дизайн должен быть читабелен и с отключенной графикой. Следовательно, те же категории картинками желательно бы писать, как положено, а картинки подкладывать фоном. Но не устраивает набор шрифтов. Уже у вас в статье обнаружился чудесный инструмент, способный решить проблему. Гугл-фонтс. Но там подошли только в приблизительном варианте латинские шрифты. Кириллические - совсем нет. Но есть вариант с @font-face.
Он, насколько я поняла, требует указать только прямую ссылку на файл шрифта, тогда этот самый шрифт можно будет использовать в оформлении без боязни, что какой-то пользователь не увидит то, что нужно и как нужно.

Вот это

Код:
@font-face {
font-family: Rurintania; /* Задаем имя шрифта */
src: url('http://my-files.ru/DownloadSave/jnhk/4427269.ttf'), /* Указываем местонахождение шрифта в формате .ttf */
url('heinrich.eot') /* Указываем местонахождение шрифта в формате .eot */ - пока не указан
}

прописано в Структуре style.css. Поставила в самый конец.

Вот так

Код:
/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
  margin-top: 0;
  font-family: Rurintania;
  }

добавила параметр и значение для группы (пока для группы).

Но указанный шрифт не применяется. Хотя изменение шрифта и есть, но не на тот, который указан.
Проблема может быть в моих кривых руках - если так, подскажите, что я делаю не так и что нужно сделать, чтобы все получилось. А еще проблема может быть в том, что я даю не ту ссылку местонахождения шрифта. С этим бы тоже разобраться, о чем прошу.
На странице с загруженным файлом шрифта под "прямой ссылкой" дается вот эта http://my-files.ru/jnhk.4427269.ttf, но ведет она... кажется... не туда. Поэтому попробовала с ссылкой на закачку http://my-files.ru/DownloadSave/jnhk/4427269.ttf, но и с ней тоже не получилось.

Ссылка на пробник - http://flo.mybb.ru/

0

49

  • Автор: mintemero
  • Бестелесный дух прошлого
  • mintemero
  • Уважение: +580

Severa

@font-face {
    font-family: Rurintania; /* имя шрифта для CSS правил */
    src: local("Rurintania"), /* проверяем наличие шрифта в ОС пользователя */
         url(http://my-files.ru/DownloadSave/jnhk/4427269.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
  }

+1

50

  • Автор: ник
  • Бестелесный дух прошлого
  • Уважение: +0

А как выровнять форум по центру, чтобы края фона торчали одинаково? Не нашла, цитату с кодом/кодами можно?

0

Страница:   1 2 3 4 5 6  

Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Архив устаревших тем » Как сделать дизайн форума? Все о создании стиля на примере Mybb форума