Photoshop og ImageReady lager dynamiske logoer for Composition Notebooks With Pen

Photoshop og ImageReady lager dynamiske logoer for Composition Notebooks With Pen

 

Når du bygger et personlig nettsted, kan en godt designet, dynamisk logo alltid gi mye farge på siden. Kanskje noen venner har sett logoen rundt en tynn sirkel med stiplede linjer rundt den sakte krypende effekten, har ikke sett venner, se her:

 

1. Utvid størrelsen på lerretet.

Etter å ha åpnet logofilen, har bildet bare ett bakgrunnslag, og siden vi trenger omrisset, kan vi ikke utvide lerretet direkte på det laget. I lagpanelet dobbeltklikker du det tomme området til høyre for bakgrunnslaget og klikker OK i popup-dialogboksen for å konvertere bakgrunnslaget til lag 0. Dobbeltklikk på navnet på laget og gi det navnet "Logo". Hold nede Ctrl-tasten og klikk på Nytt lag-knappen nederst på panelet. Lag et nytt lag, lag 1, under "Logo"-laget. Velg så menykommandoen "Bilde→Lerretsstørrelse", endre lengdeenheten til piksler i dialogboksen, merk av for Relativ, øk bredden og høyden med 40 piksler, og behold standard midten av ankeret.

 

Resultatet av dette trinnet er at lerretet er 20 piksler større i alle fire retninger, noe som åpner for plass til neste trinn.

2. Lag mønstre for å fylle ut bakgrunnen.

 

Bruk menykommandoen "Fil → Ny" for å lage en 8×8 pikselfil med en hvit pennfarge. For å kunne se, kan vi trykke Ctrl+"+" flere ganger for å gjøre filvisningen stor nok for enkel manipulering. Velg rektangelvalgverktøyet (snarvei M), tegn en firkantet boks på 4 piksler i øvre venstre hjørne, hold nede Shift-tasten og legg til den samme boksen i nedre høyre hjørne. Sørg for at gjeldende forgrunnsfarge er svart som standard, hvis den ikke er det, kan du trykke på D-tasten for å gjenopprette den til standard. Trykk Alt+BackSpace for å fylle utvalget med svart forgrunnsfarge, og trykk deretter Ctrl+D for å oppheve markeringen.

 

Velg menykommandoen "Rediger → Definer mønster", navngi det nye mønsteret "Svarte og hvite firkanter" i dialogboksen, og trykk på OK-knappen for å lagre det tilpassede mønsteret.

 

3. Lag en stiplet boks.

Gå tilbake til filen der logoen er plassert, på lagpanelet, velg lag 1-laget nedenfor, velg deretter menykommandoen "Rediger → Fyll", velg "Mønster" i dialogboksen, velg "svart-hvitt" square" mønster vi nettopp tilpasset i rullegardinlisten nedenfor, og behold resten av alternativene som standard.

 

Når det er bestemt, vil lag 1-laget fylles med tette, vanlige svarte og hvite firkanter

På lagpanelet klikker du på Nytt lag-knappen nederst på panelet for å lage et tomt lag, lag 2. Hold nede Ctrl-tasten og klikk på "Logo"-laget for å laste omrisset som et utvalg. Velg menykommandoen "Velg → Endre → Utvid", skriv inn 1 i dialogboksen, trykk på OK-knappen, og utvalget utvides utover med én piksel. Trykk Ctrl+Shift+I for å reversere valget. Bekreft at gjeldende lag er lag 2, trykk Ctrl+BackSpace og fyll utvalget med bakgrunnsfargen hvit. Gi lag 2-laget navnet "White Edge". Trykk Ctrl+D for å velge bort og du kan se en stiplet boks rundt logoen.

 

4. Gjør de stiplede linjene på hver side uavhengige av hverandre.

Leserne må ha sett at, ja, denne stiplede linjen er falsk, det er en røykskjerm, er å la bakgrunnsmønsteret gjennom en 1 piksel bred spalte eksponert del, hvis det er vanskelig å få det til å bevege seg. Hva å gjøre? Vi fortsetter å bruke røyk og speil -- fire bakgrunner for hver side. På lagpanelet drar du lag 1 til Nytt lag-knappen nederst på panelet og lager en ny lag 1-kopi av dette laget. Gjenta ytterligere to kopier for å få fire identiske lag med mønsteret "svarte og hvite firkanter". Velg verktøyet for valg av enkeltkolonne piksler, forstørre bildevisningen til riktig skala, enkeltklikk på den stiplede linjen på venstre side av logoen, og velg alle linjene der den stiplede linjen er plassert. På lagpanelet velger du Layer1 og klikker på knappen Legg til lagmaske nederst på panelet. Resultatet vil være en nesten helt svart maske for dette laget, hvit bare på linjen der den stiplede linjen er til venstre for logoen, noe som betyr at laget Layer1 bare vil være synlig på den linjen. Deretter, ved å bruke samme prinsipp, velger du de stiplede linjene over, til høyre og under logoen ved å bruke henholdsvis enkeltrads og enkeltkolonne pikselvalgverktøy, og legg til masker til de resterende tre mønsterlagene etter tur. På dette tidspunktet endrer ikke logoen seg fra overflaten, faktisk er den stiplede linjen rundt den allerede sammensatt av fire deler. Du kan skjule et lag og se om dette er tilfelle. Navngi de fire mønsterlagene "venstre", "opp", "høyre" og "ned" i henhold til deres korresponderende deler.

 

5. Flytt den stiplede linjen i ImageReady.

Nå som vi er ferdige med forberedelsene, la oss bytte til animasjon i ImageReady. Ved å trykke på hoppknappen nederst i verktøykassen vil ImageReady automatisk kjøre og automatisk laste inn filen vi nettopp har forberedt, med alle lagene og maskene som de er. På animasjonspanelet kan du se at det gjeldende bildet automatisk blir det første bildet i animasjonen. Klikk på Kopier gjeldende ramme-knappen for å lage en andre ramme som er identisk med den første rammen.

Velg flytteverktøyet. På lagpanelet velger du laget "Venstre" og trykker på pilknappen ↑ for å flytte det opp én piksel. Flytt deretter laget "opp" en piksel til høyre, laget "til høyre" en piksel ned, og laget "ned" en piksel til venstre. Fra bildet ser det ut som den stiplede boksen vrir seg i retning med klokken. Dupliser ramme 2 som ramme 3 i animasjonspanelet og bruk samme metode for å flytte den stiplede boksen med klokken igjen. Gjenta prosessen til Frame 8 er ferdig. Den grunnleggende enheten for mønsteret vi laget i forrige seksjon er 8 piksler, beveger seg 1 piksel per ramme, og det kan gjentas etter bare 8 bilder.

 

6. Endelige innstillinger.

Standardinnstillingen for ImageReady er {{0}} sekunder per bilde, vi må endre dette tallet. På animasjonspanelet klikker du på Ramme 1 for å velge den, og hold deretter nede Shift-tasten og klikker på ramme 8 for å velge alle 8 rammene. Klikk på rullegardinmenyen for hviletid under en hvilken som helst ramme og velg 0.1 sekunder, slik at hviletiden for alle bilder endres til 0,1 sekunder.

 

I henhold til de spesifikke behovene kan vi også endre den hvite kanten utenfor den stiplede linjeboksen til andre farger eller kutte den av, for bedre å tilpasse oss behovene til webdesign og produksjon.

 

Ok, animasjonen er ferdig. Smarte lesere har sett at hele prosessen med denne opplæringen er å oppnå et visuelt bedrag, så lenge ideen er klar, er produksjonsprosessen ekstremt enkel. Så lenge vi åpner opp ideene våre, kan det samme eksemplet også lage en rekke slingrende måter for stiplet linjeramme til.

 

Sluttresultatet er dette:

Det skal bemerkes at i trinn 5 kan du kopiere den andre rammen og flytte hver del direkte med 7 piksler, og deretter velge Tween i funksjonsmenyen for animasjonspanelet, og programvaren genererer automatisk de midterste 6 rammene - dette kan være mer praktisk , men det er ikke like lett å forstå som ramme-for-bilde-bevegelsen.