Adobe ImageReady программаcында анимацияле кнопкалар ясау

Adobe ImageReady программасы Adobe PhotoShop ның 5 нче версиясеннән бирле аның белән бергә йөри. Adobe PhotoShoр тагы кебек рәсемнәр белән эшләп булу мөмкинлегеннән тыш, ImageReady программасында динамик рәсемнәр иҗат итеп була: анимацияле график сылтамалар һәм кнопкалар. Менә бу кнопка шушы программаларның уртак хезмәтләре "җимеше".


Бер программадан икенче программага күчү бик ансат: моның өчен шушы кнопкаларга чирттерү җитә: һәм  Алар һәр ике программаның да инструментлар панеле астындарак урнашканнар.

Кнопка ясау өчен Adobe PhotoShop программасын ачып, менюдан File - New (Файл -яңа) ны сайлыйбыз.



Монда кнопканың исемен (Name), киңлеген - Width һәм биеклеген - Height күрсәтәбез. Төсләр - RGB, фонны ак (White) калдырабыз. ОК га чирттергәч, Adobe PhotoShop ка күчәбез. 
Түбәндә булачак кнопканың эскизы. Хәзер аны матурлыйсы кала. Моның өчен берничә эш эшләп алырга кирәк.


 
Менюдан Window - Layers (Тәрәзә - катлаулар) ярдәмендә катлаулар панелен ачабыз. Ул уң якта, түбәндә торачак.



Анда булачак кнопка рәсеме йозакта тора, кнопкага үзгәрешләр кертү мөмкинлеге юк. Тычканның курсорын  Background сүзе өстенә куеп уң кнопка ярдәмендә контекстлы менюны ачабыз:



Duplicate Layer...   яңа тәрәзә ача:



Копияне 1 дип билгелибез (саташып китмәс өчен бик җайлы!).
Background катлавын түбәндәрәк урнашкан чүплек савытына  тычкан белән "сөйрәп" төшерәбез. Катлаулар панелендә 1 нче дип исемләнгән катлау гына кала.

Төсләр панеленнән Stiles не ачып, охшаган стильне сайлыйбыз.

Стильләр панеленең уң ягында, өстә, ябу кнопкасы астында урнашкан, эчендә өчпочмак сурәте ясалган түгәрәк кнопкага тычкан белән чирттереп, Rollover Buttons (ролловер кнопкалары) юлын сайлыйбыз, югарыдагы уңда урнашкан рәсемдә сез шуны күрәсез дә. Кнопка өчен файдаланылган стиль әйләндереп алынган. Исеме - Red Rollover 3.

Аңа чирттерү белән ак кнопка кабарынкы кызыл кнопкага әверелә. Катлаулар панеленең аскы өлешендә урнашкан тамгасына чирттереп, кнопка стиленә тагын үзгәрешләр кертеп була. (Экспериментлар ясап карагыз - ә бәлки әлегә кирәкмидер?:)

Кнопканың өстенә сүзләр язу өчен инструментлар панеленнән хәрефенә чирттерәбез, аннары кнопканың уртасынарак - тагын бер тапкыр. Хәзер инде кирәкле сүзне язасы кала. Кыенлыгы шунда - татар хәрефләре урынына сорау билгеләре чыга. Моннан котылу өчен татар хәрефләре кергән сүзне Блокнотка язып, хәтергә алырга ( Edit + Copy), шуннан соң га һәм кнопкага чирттереп, хәтердән салырга: Edit - Paste. Билгеле, шрифт Arial, Tahoma яки Times New Roman булырга тиеш).

 

Хәзер катлаулар панелендә ике катлау: түбәндә - кызылга буялган стильле кнопка, аннан өстә - сүз (сүзләр) язылган үтә күренүчән катлау. Аның да исеме 1 дип куелса, чуалмаска яхшы булыр. Өстәге катлаудагы сүзгә (ул сез кнопкага язган сүз) ике тапкыр чирттерегез.  Калганы сүзсез дә аңлашыла.

Катлауларның сул кырыендагы "күз"ләргә чирттереп карагыз: "күз" югалса катлау күренми, күз булганда катлау да күренә. Ул күзләргә бик белеп чирттерергә туры киләчәк әле.

Хәрефләр язылган катлауга чирттереп, кара зәңгәр төскә кертәбез. Күзләр икесе дә ачык. Катлаулар панелендәге тамгасына басып, иң өстәге юлны: Drop Shadow... ны сайлыйбыз. Кнопка өстендәге язу өскә калкыр, түбәндә күләгә күренер. Яңа ачылган тәрәздә -  Layer Stile тәрәзендә - Distance - 3, Size - 3 куела. Шушындый кнопка килеп чыга:



Бу кнопка браузер сайтны ачканда күренәчәк, ул нормаль ( Normal) торыш дип атала. Тагын Over һәм Down торышлары кирәк.

Over - тычкан рәсем өстендә, кнопкаларына басылмаган.
Down - тычканның кнопкасын рәсем өстендә басу (чирттерү). Бу халәт тычкан кнопкасын җибәргәнче дәвам итә.

Хәзер Over ны, икенче торышны - тычкан кнопка өстенә кергәч, аның үзгәрү торышын әзерлибез.
Ике катлауның да копияләрен алыйк. Бу турыда югарыдарак язылган иде.



Копияләрнең икесен дә 2 ле белән тамгалыйк, аларны тычкан ярәмендә югарыдагы рәсемдәгечә урнаштырыла. (рәсемдә сүзләр катлавы активлаштырылган, хәзер ул кирәк булачак). Катлау кырыендагы  тамгасына ике тапкыр чирттергәч, шушы тәрәзә килеп чыгар:



 

Drop Shadow га тамга куелган, Outer Glow га да куегыз, кнопкага язган сүзнең ничек үзгәргәнен карагыз. Тычкан кнопка өстенә кергәч, сүз нурлар чыгарган кебек.



Down торышы өчен 2 нче номерлы катлаулардан тагын ике копия алабыз, икесен дә 3 белән билгелибез, тәртип буенча урнаштырабыз. 3-3, 2-2, 1-1.



Кнопка рәсеме катлавын активлаштырыйк, ул өстән икенчесе. Яңадан кырыйдагы тамгага  ике тапкыр чирттерәбез.

Хәзер инде Inner Shadow ны тамгаларга кирәк. Ул кнопкага баскач, аның түбәнгә иңү эффектын бирә (кнопканың өске һәм сул якларында күләгә ясый). Кнопка түбәнгә төшкәндә аңа язылган сүз дә ияреп төшсен өчен, сүзләр язылган 3 нче катлау активлаштырыла. Аннары инструментлар панелендә шушы тамгага (күчерү) басабыз:



Клавиатурадагы дүрт укның түбәнгә күрсәтүчесенә бер яки ике (шуннан артык кирәкми!) тапкыр басабыз, кнопкага язылган сүзләрнең түбәнгә күчешен монитордан күзәтәбез.



Normal, Over, Down торышлары өчен кнопкаларны әзерләү тәмамланды дип әйтеп була, хәзер катлауларны берләштерергә кирәк. 1-1, 2-2, 3-3 катлауларын югарыда әйтелгән "күз" ярдәме белән берләштерәбез.
 

3-3 катлауларында "күз" ләрне калдырып, калганнарында бетерәбез. Моның өчен аларга тычкан белән чирттерегез. Чирттердең - бетә, чирттердең - яңадан чыга...
Кабатлыйм: "күз" ләр 3-3 катлауларында гына калалар. Актив катлау - хәрефле сүзләр катлавы.  Аннары менюдан Layer -  Merge Visible (күренгәннәрне кушарга) командасына чирттерәбез. Түбәндәге рәсемдә шуның нәтиҗәсе.



2-2, 1-1 катлаулары белән дә нәкъ шундый эш башкарганнан соң, моны күреребез:



Игътибар итегез, бу рәсемдә "күз" 1 нче катлауда, катлау активлаштырылган.

 Adobe PhotoShop программасында эшләр бетте, хәзер инструментлар панелендәге шушы рәсемгә чирттереп, Adobe ImageReady программасына күчик. Барысы да дөрес эшләнгән булса, шушы рәсем күренәчәк:



Әгәр мондый рәсем булмаса, менюдан Window - Rollovers һәм Window - Layers командаларын сайлагыз. Алар икесе дә кирәк.

Rollovers панеленең уң ягында, өстә кнопка бар (ябу кнопкасы астында). Хәзер шуңа чирттерәбез:



 Иң өстәге юлны сайлагыз. (New Rollover State). Ягъни, кнопканың яңа торышын сайларга.  Чирттерәбез, Һәм күрәбез:



Rollover панелендә Over State торышы килеп чыга, безгә Layers (катлаулар) панелендә "күз" ярдәмендә аның икенче катлау торышы икәнлеген күрсәтәсе генә кала.

New Rollover State ны яңадан сайлыйбыз (каян икәнлеген онытмадыгызмы?:-) Хәзер инде Down торышы чыгачак, димәк "күз" иң өстәге 3 нче катлауда булырга тиеш.



Эшнең барып чыктымы, әллә юкмы икәнлеген Adobe ImageReady  программасында тикшереп алу ансат: моның өчен инструментлар панелендә   шушы рәсемгә чирттерергә һәм кнопкага тычкан белән чирттереп карарга кирәк. Барысы да канәгатьләндерә икән - сакларга куярга да була.

Менюдан File - Save Optimized As... юлы буенча кереп, рәсемне сакларга куябыз. Шушы диалог тәрәзәсе ачылыр:



Эшне рәсемдәгечә сакла!

1. Имя файла (файл исеме): инглиз телендә.
2. Тип файла (файл тибы): HTML and Images (*.html), ягъни, HTML коды һәм рәсемнәр (рәсемнәр - аерым Images папкасында үзләре тупланалар).

1. Инглиз телендә - чөнки Интернетка татарча яки русча исемләнгән файлларны урнаштырырга әлегә рөхсәт юк.
2. HTML коды һәм кнопка рәсемнәренең файллары булса, кнопканы Web - битнең теләсә кайсы урынына урнаштырып була.

Билгеле, сорау туарга мөмкин: ә ничегрәк урнаштырырга? Урнаштыру өчен нәрсәләр кирәк? Ул кнопкага ничек сылтаманы (link) беркетергә?

Мондый сораулар туса, хат яз: duslarga@yandex.ru
Яки форумга кил: http://duslarga.forum24.ru

Яшел Үзән районы Акъегет урта мәктәбенең биология укытучысы Нигъмәтуллин Рәшит Зәкиевич.

















































Hosted by uCoz