Jump to content
  • 0

Спрайт для счетчика для нестандартных цифр

Zverushka

Asked by Zverushka,

 Share

Question

Zverushka Explorer

Zverushka

Posted
Posted (edited)

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

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

Edited by Zverushka
Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
ESSqS Explorer

ESSqS

Posted
Posted

Я считаю что все то что должно быть нарисовано должен сделать дизайнер. А склеивание в спрайт 10 цифр, это уже дело верстальщика. Но если все сводиться к простому изменению одной цифры, например если стили определены в layer style, то это может сделать верстальщик.

Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted

Странные у вас вопросы. 

Умеете или хотите - делайте, не умете или не хотите - отдавайте дизайнеру.

 

Если в макете все есть, т.е. не придется самому браться за карандаш и что то рисовать, а требуется просто скомпоновать спрайт, то с этим и верстальщик справится. Вообще этот процесс давно автоматизирован, и есть куча сервисов, которым закидываются картинки и они делают спрайт вместе с css.

Link to comment
Share on other sites
  • 0
Zverushka Explorer

Zverushka

Posted
  • Author
Posted

Я пытаюсь понять, где моя работа, а где уже не моя.
Что я должна делать, что нет.

Цифры - это не совсем привычные спрайты для верстальщика - так как там нужно вручную на 10 слоев нарезать ряд цифр, еще и центровать и сетку вручную создавать - никакой сервис автоматизированно это не сделает. @npofopr, вы занимались таким процессом с нестандартным счетчиком?

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

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted

Анимация счетчиков обычно идет на css3-трансформациях или js-анимации. Так что рисовать ничего не надо.

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

Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted

Вот вот. 

На http://codepen.io/ таких счетчиков куча. Даже вы вроде бы, не так давно выкладывали какой то счетчик.

 

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

Link to comment
Share on other sites
  • 0
Zverushka Explorer

Zverushka

Posted
  • Author
Posted

Ну изначально речь шла о таком спрайте

 countdown.png

Очень много скриптов, да, но с перелистыванием на трансформациях только один (флип клок) - и он по-моему толи недоделанный, толи недодуманный, я не смогла там даже дату нормально настроить. Чтобы были дни или месяцы в таймеры - нужно создавать clock face, которые создаются на js и подключаются как внешние модули. Я так повтыкала полчасаи поняла, что мне без поллитра не разобраться в этом чуде. И также непонятно как стиль изменить допустим, если цифры картинкой вставлены.

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

Вопрос не в том кто кому что должен. А в том кто что умеет. Если не получается самой нарисовать то проси дизайнера дать хотябы то с чем ты сможешь работать.

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

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

 

http://jquery-countdown.googlecode.com/svn/trunk/index.html один из таких счетчиков. Спрайты реализованны по-разному у подобных счетчиков.

 

Дизайнер может нарисовать отдельно циферки, а верстальщику потом можно будет просто в спрайт собрать.


Это флешка чистой воды

Флеш все реже встречается.

  • Like 1
Link to comment
Share on other sites
  • 0
Zverushka Explorer

Zverushka

Posted
  • Author
Posted (edited)

Так вот же линканули http://jquery-countdown.googlecode.com/svn/trunk/index.html, пока не пришлось им воспользоваться и надеюсь не придется.. Я пока пользуюсь статичным счетчиком и все устраивает)

Edited by Zverushka
Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted

Так вот же линканули http://jquery-countdown.googlecode.com/svn/trunk/index.html, пока не пришлось им воспользоваться и надеюсь не придется.. Я пока пользуюсь статичным счетчиком и все устраивает)

Да это я видел, пока просто не нашел спрайт цифр белый. Все черные.

Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted

Так  нужно свой спрайт вставить и все - из макета нарезать, сшить.. и будет хоть беленький, хоть красненький.

А ты ищешь именно с перелистыванием?

Просто весьма сложный там спрайт

Можно конечно и на css3

Но в случае картинок, наверняка большая поддержка версий браузеров :-)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept