Остальное

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

Теперь заходим на свой профиль в аниме-листе. В верхнем левом углу странички сайта выбираем меню Profile ->Panel Edit.

Далее выбираем My List Style

Для аниме листа существует стандартное, с белым фоном и синими ссылками, оформление. Кроме него существует ещё несколько стандартных вариантов оформления, которые можно поменять, перейдя по ссылке Change My List Style.
Все предложенные стандартные стили оформления изменить нельзя, но среди списка оформлений есть один пункт, который отвечает за ваше собственное оформление. Этот пункт называется *ваш ник*'s Style По этому переходим по ссылке Change My List Style а в появившемся окне выбираем свой стиль, а затем возвращаемся в пункт меню My List Style. Если сейчас взглянуть на получившийся аниме-лист, то вы увидите достаточно убогое оформление: белый фон, красные надписи.

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

Согласитесь, второй вариант смотрится куда лучше первого. Чтоб "растворить" границы нашей картинки в оранжевом цвете, откроем эту картинку в Фотошопе. С помощью инструмента выделение выделяем прямоугольником любой край картинки:

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

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

Проделываем подобную операцию и с остальными гранями, пока не получим вот такую картинку:

Теперь загружаем нашу картинку на аниме-лист. Для этого возвращаемся на сайт к меню My List Style и там переходим по ссылке Upload Wallpaper / Change My List Wallpaper Settings. В открывшемся окне выбираем Обзор, там выбираем вашу картинку, и нажимаем Upload Wallpaper. Напротив пункта Show Wallpaper должно стоять Yes. После этого картинка загрузится и будет фоном вашего аниме-листа. Но если вы посмотрите на аниме лист, то увидите, что размер картинки меньше размера экрана и она начинает повторяться. Чтоб исправить эту ошибку перейдём в меню основных настройках стиля аниме листа. Для этого снова вернёмся в меню My List Style и там перейдём по ссылке Edit My Style. После этого у нас появится окно с кучей всевозможных свойств стиля аниме-листа. Изменяя эти свойства, вы изменяете непосредственно оформление аниме-листа. Для начала установим правильные свойства для нашего фонового изображения. Для этого опускаемся до пункта Wallpaper.

Начнём снизу. Пункт Background-Repeat отвечает за повторение картинки. По умолчанию картинка повторяется на весь экран, но если мы установим значение этого поля как no-repeat, то наша картинка перестанет повторяться (другие значения можно посмотреть щёлкнув на ссылку More Info, что напротив данного пункта).
Пункт Background-Position отвечает за расположение картинки на экране. С помощью этого пункта можно переместить её в центр, в правый верхний угол или в левый нижний. в нашем случае переместим её в правый нижний угол, установив значение свойства как bottom right (другие значения можно посмотреть щёлкнув на ссылку More Info, что напротив данного пункта).
Пункт Background-Attachment отвечает за расположение картинки при прокрутке вверх или вниз аниме-листа. По умолчанию картинка будет "уезжать", когда вы прокручиваете аниме-лист. Чтоб картинка независимо от прокрутки всегда находилась в одном месте необходимо установить значение этого свойства как fixed. (другие значения можно посмотреть щёлкнув на ссылку More Info, что напротив данного пункта).
Установив все вышеуказанные свойства и применив их мы получили аниме лист со статичной не повторяющейся картинкой, находящейся в правом нижнем углу.

Далее снова вернёмся к Edit My Style. Установив картинку, мы должны сделать окружающий её фон оранжевым цветом, а не белым, каким он является по умолчанию. Для этого в пункте General в Edit My Style находим пункт Background Color

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

Работа с фоном закончена, осталось только отредактировать сам список. Если присмотреться к аниме-листу то список представляет собой заглавную строку (в ней находятся заголовки Anime Title, Score, Type) и чередующиеся разным цветом строчки с названиями аниме. Параметры этих строчек, включая их цвет, шрифт текста, находящегося в них, можно изменить в соответствующих пунктах меню Edit My Style. За заглавную строчку отвечает пункт Row Header Properties а за чередующиеся Row 1, 2 Properties.

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

В конечном этапе у меня получился вот такой вот аниме лист:

Аниме лист сделан для пользователя KudrO. Просмотреть лист в браузере можно тут.

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

Может получится вот такой вот привлекательный аниме-лист:

Лист Лайка.

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

[?] Теги: аниме лист, animelist, сайт, дизайн, оформление, анимелист, myanimelist

Серф