Перейти к содержанию
Old Phone Forum
  • Вход

    Вы сейчас не залогинены на форуме.

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

Создаём красивое меню для х700,e730 и т.д.


Рекомендуемые сообщения

Здесь я вам расскажу как можно быстро и просто создать меню для вашего любимого телефона.

 

Приступим:

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

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

 

К примеру у нас уже есть всё что нам нужно, а именно это:

1. 9 Иконок меню

2. Фон меню

 

Собственно процесс создания:

1. Значит так) открываем графический редактор, в нём открываем наш фон.

2. Если вы не уверены в вашей фотографической точности, то наложите поверх фон мой шаблон.(он представляет собой прямоугольник из 9и ячеек)

3. После наложения шаблона расположите ваши иконки по аналогии по середице каждой из ячеек

4. После расположения шаблон уже вам не нужен. можете его удалить или поставить видимость на 0.

5. Теперь можем экспортировать полученную картинку размером 176х150 и это и будет именно наш фон меню. проект сам не закрывайте пока, он нам понадобиться. На всякий случай сохраняем проект как шаблон в psd

6. Сейчас мы будем делать анимацию для нашего меню. На примере анимации журнала звонков.

---6.1. Ставим прозрачность на иконку 100%

---6.2. Рисуем квадрат(контур например красный а закраски нет вообще) с длинной стороны 85 пикселей, и располагаем его на координатах х=0 у=0

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

---6.4. Создаём новый документ размером 85х85 и туда вставляем наш этот кусок

---6.5. Вставляем поверх нашу иконку Журнала звонков и придумываем анимацию. Анимация одного элемента меню это 3 кадра, так что думайте и фантазируйте как хотите.

---------6.5.1. Виды анимации: Тут всё зависит от вашей оригинальности.

---------6.5.1.1. Например один из самых простых способок создать анимацию это на каждый кадр на иконку вставлять glow разных цветов.

---------6.5.1.2. Второй спобоб это делать так чтобы ваша иконка как бы проявлялась из пустоты, для этого к примеру на первый кадр ставиться прозрачность иконки 20%, на второй 60%, а на третий 100%.

--------- 6.5.1.3. Третий способ анимации это когда ваша иконка как бы растёт. Тоесть в первом кадре она маленькая, во втором больше и в третем совсем большая, ну самое главное чтобы она не вылазила за пределы это квадрата размером 85х85

---------6.5.1.4. Четвёртый способ это анимация самой иконки, это самый тяжёлый способ анимации. Потому что чтобы такое сделать у вас или должны быть исходники картинки или вы автор или вы очень хороший художник, что сможете заменить всё что вам нужно и так что этого никто не заметит:) Анимация меню в моей теме Archon имеет именно такой вид, каждая иконка имеет свою уникальную анимацию.

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

---------6.5.1.6. Как описано выше, вы разумеется понимаете что типы анимаций может быть столько сколько вы придумаете, так же можно совмешать разные типы для получения максимальной красоты.

---6.6. После того как мы определились и нарисовали то что нам нужно, сохраняем это и радуемся)) с анимацией первого элемента меню поконченно.

---6.7. Теперь о грустном)) нам надо таких ещё 8 элементов) тут всё уже по аналогии.

7. После нескольких часов возни в граф. редакторе вот мы и сделали наше меню. Теперь зальём его в телефон и проверим как оно смотриться, если делать всё точно по инструкции, то у вас с первого раза получиться классное без глюков меню.

8. Опять о грустном)) с первого раза даже у меня не получается чтобы всё было идеально)) на то причина такая как самсунг)) на телефоне будет смотреться не так как на компе, так что возможно вы что то переделаете.

9. Небольшой совет всем начинающим, сохраняйте ваши творения почаще, да и в шаблонах psd, чтобы вы всегда молги исправить то что вам не нравиться, а то какой кайф если вы этого не сделали, опять сидеть резать и т.д.

 

Вот тут я напишу координаты в которые надо ставить квадрат с красной коёмкой про который я писал выше.

Напишу координаты так же как и стоят пункты в меню, тоесть прямоугольником из 9и ячеек

 

|-------------------------------------------------------------|

|X=00,Y=00 -- X=50,Y=00 -- X=91,Y=00|

|-------------------------------------------------------------|

|X=00,Y=33 -- X=50,Y=33 -- X=91,Y=33|

|-------------------------------------------------------------|

|X=00,Y=64 -- X=50,Y=64 -- X=91,Y=64|

|-------------------------------------------------------------|

 

К этому посту я прикреплю:

1. Шаблон прямоугольника он же template.rar

---1.1 Шаблон имеет размер 176х148, почему не 150, а потому что в телефонах самсунг програмно рисуется две полосы длинной 176 и высотой 1 пиксель, следовательно мы ставим наш шаблон в 0,0 а потом опускаем на 1 пискель вниз, и работаем:)

2. Картинку на которой будут отображены все необходимые шаги по созданию анимированного меню. она же solution.rar

 

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

solution.rar

template.rar

  • Like 3
Ссылка на комментарий
Поделиться на другие сайты

sleeping-man,

мМолодца!

Я сам уже 5 менюх сделал Но только на пятой догадался бумажку с записаными координатами на монитор приклеить а то она терялась всё время и приходилось по новой колпачить :)

А так всё с твоим сходится только делаю не много не так

Настоящему индейцу,завсегда,везде НИШТЯГ,

Ссылка на комментарий
Поделиться на другие сайты

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

 

з.ы. я координаты с первого раза запомнил:)

Ссылка на комментарий
Поделиться на другие сайты

 

---1.1 Шаблон имеет размер 176х148, почему не 150, а потому что в телефонах самсунг програмно рисуется две полосы длинной 176 и высотой 1 пиксель, следовательно мы ставим наш шаблон в 0,0 а потом опускаем на 1 пискель вниз, и работаем;)

 

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

Изменено пользователем ImpacT

X120-->X700 (512mb)-->E200 (512mb)-->Nokia 6233 + D820 (1gb)-->D780 (1gb) + U800 (1gb)-->D980--> B7722 + Gt-i5800

----------------------------------------------------------------

B7722 <SW VER> B7722XEJI1 <CSC VER> B7722OXEJH1

Ссылка на комментарий
Поделиться на другие сайты

ImpacT, а на Theme Engine это не влияет))

Ссылка на комментарий
Поделиться на другие сайты

bober67, у меня тоже оба стоят, в меню всё равно рисуются полосы если темы стоят, а если цветовых схемы то нет.

я то тем уже сделал куча)) мне виднее)) в моей карте это самый первый цвет в закладке меню, называется "Главное меню gv_ColorBlockMenuLine"

Ссылка на комментарий
Поделиться на другие сайты

  • 2 месяца спустя...

bort705, любой графический редактор подойдёт.

я рисую в Macromedia FireWorks 8 потому что мне в нём удобнее, другим в фотошопе удобнее.

каждому своё. :vygl:

Ссылка на комментарий
Поделиться на другие сайты

Да я просто в фотошопе разобратся немогу как прозрачность ставить и размер иконок менять он не русифицированый паинт есть но в нем нифига кроме рисования незделаеш

Ссылка на комментарий
Поделиться на другие сайты

bort705,

Возьми Paint Net - офигеенно удобная и мощная программа для подобного рода задач. Русификатор есть . А Фотошоп громоздкий. Из минусов- требует Net Framework 1.1 ( 3.0 версия - Net Framework 2.0 ) от мелкософта..

--------------------------------------------------------------------------------------------

Модифицированная прошивка для X700 Retro Style 3D by rost751

Тема для Symbian Pear wood by rost751

Ссылка на комментарий
Поделиться на другие сайты

rost751, а ещё проше взять macromedia fireworks 8, и профессионально и весит всего 80 метров :!:

Ссылка на комментарий
Поделиться на другие сайты

весит всего 80 метров

:)

Paint Net весит до 4 метров ... Для начинаещего - самое то !!! И работа со слоями тебе, в последней версии добавлено много эффектов ... И очень - очень удобная Кого Framework не смущает..

--------------------------------------------------------------------------------------------

Модифицированная прошивка для X700 Retro Style 3D by rost751

Тема для Symbian Pear wood by rost751

Ссылка на комментарий
Поделиться на другие сайты

rost751, 80 по сравнению с фотошопом цветочки :evil:

не знаю, меня он не прикалол.

Фреймфорк ещё 20-25 метров ) если 2ой то 40 вроде :)

так что дело ваше :)

Ссылка на комментарий
Поделиться на другие сайты

Я извиняюсь ребята нашел обе проги но так и немогу разобратся где в них или как выставляется прозрачность немогу найти если не трудно подскажите

Ссылка на комментарий
Поделиться на другие сайты

bort705,

пожалуйста. более подробно изложи задачу

--------------------------------------------------------------------------------------------

Модифицированная прошивка для X700 Retro Style 3D by rost751

Тема для Symbian Pear wood by rost751

Ссылка на комментарий
Поделиться на другие сайты

Как вы поняли я не профи в этой сфере но ужас как хочется сотворить менюшку там темку и тд подходяший для меня фон я нашел иконки тоже обрезал наложил на фон дошло дело до выставления прозрачности на иконках (они на белом фоне ) из за этого невидно рисунок(основной фон под иконками)надо выставить прозрачнось вот тут все и остановилось паинт я нашел не русифицировамый а макромедиа русифицирована но как оказалось для меня всеравно проблема найти где в прогах кнопка или чем там как она ставится вот моя проблема незнаю на что нажать

Ссылка на комментарий
Поделиться на другие сайты

bort705,

в паинт нет - открываешь свою иконку, ищешь на панели инструментов "волшебную палочку" и кликаешь ею на фоне . Получится, что объект внутри фона как бы выделен пунктиром. Жмешь кнопочку Del - все , белый фон удалили и остался сам объект , а вокруг - серая "шахматная доска" - это означает, что фон невидимый . Теперь сохраняешь в *.png ( не pdn , это файлы проекта программы , никакая другая прога их не видит ) . Все :P

--------------------------------------------------------------------------------------------

Модифицированная прошивка для X700 Retro Style 3D by rost751

Тема для Symbian Pear wood by rost751

Ссылка на комментарий
Поделиться на другие сайты

Спасибо все получилось еше вопросик в шаблон иконки вставлять размером 85 на 85 или другой?

Ссылка на комментарий
Поделиться на другие сайты

bort705,

да, сами подложки иконок имеют размер 85х85 пикселей

Но ! В среднем раду иконок ( сверху вниз если смотреть ) подложки сдвинуты где-то на 5 пикселей, если мостить иконки сразу размером 85х85 - то будет некрасиво . Поэтому рекомендуемый размер САМИХ иконок меню- где-то 80х80 пикселей

:)

--------------------------------------------------------------------------------------------

Модифицированная прошивка для X700 Retro Style 3D by rost751

Тема для Symbian Pear wood by rost751

Ссылка на комментарий
Поделиться на другие сайты

  • 2 недели спустя...

Кому нужны интересные иконки прошу вас на http://art.sgh.ru

Постоянно обновляется архив иконок, пока выбор конечно не большой, но за качество кка говорится я ручаюсь) все иконки отсев проходят через меня :bx:

Ссылка на комментарий
Поделиться на другие сайты

  • 9 месяцев спустя...

Всем здрасте!У меня такой вопрос,для тех,кто работает в фотошопе.Как там нарисовать квадрат 85 на 85,а потом вырезать все чтов нем.Я уже по разному прбывал.Создавал новый документ в форме квадрата 87 на 87,потом обводил его красным карандашом,потом налаживал на фон меню,сохранял картинку,потом открывал другой редактор,вырезал квадрат 85 на 85,по теории должно было совпасть с фоном меню,но потом когда все зделал,все равно не совпадает.И возможно ли в фотошопе вводить эти координаты,что в инструкции,если да,то куда?

X100--->>>X700+512 mb

Ссылка на комментарий
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать аккаунт

Зарегистрируйте новый аккаунт в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


×
×
  • Создать...