Maak een cursor. En ik zou willen opmerken dat elke bezoeker van deze site veilig een onderwerp voor een artikel kan voorstellen in de reacties. Als het onderwerp goed is en er veel vraag naar is, zal ik zeker een artikel of les schrijven. Maar helaas noch in Photoshop, noch in welke “online photoshop” dan ook Pixlr of wat dan ook, het is onmogelijk om een ​​volwaardige cursor te maken. Je kunt echter een afbeelding van een cursor maken en deze vervolgens voltooien met behulp van speciale magie en een speciaal programma dat cursors maakt. Zoals gewoonlijk begon ik mijn zoektocht met bekende zoekmachines (zie Google en Yandex), maar tot mijn verbazing vond ik geen enkel zinnig artikel over dit onderwerp, behalve paniekerige opmerkingen op forums en nutteloze antwoorden.

Het maken van een cursor of pictogram is niet moeilijk. Mijn eerste cursors maakte ik toen ik nog op school zat. De computer draaide Windows 98, de lucht was blauwer en het gras was groener. Ik zal je leren hoe je een cursor in het programma maakt Photoshoppen, u kunt het echter overal doen, zelfs in MS Paint-e. Het belangrijkste is dat uw grafische editor doorschijnend gehouden PNG echter, alles is in orde. Zoals gewoonlijk kan ieder van jullie PSD-bestanden met lagen downloaden, evenals alles wat we in dit artikel zullen doen.

Iets over de cursor

Ten eerste moet u begrijpen dat een cursor niets meer is dan een rechthoekig stukje afbeelding. Natuurlijk zien we alleen de cursor zelf, en dit komt omdat de rest van de grafische weergave transparant is en de alfakanaalwaarde is teruggebracht tot nul. Dit betekent dat we allereerst een grafische editor nodig hebben waarin je met doorschijnende vlakken kunt werken en deze kunt opslaan, bijvoorbeeld in GIF of in een doorschijnende PNG 24. En dit is natuurlijk Photoshop, hoewel de cursorafbeelding zelfs in Illustrator kan worden gemaakt, omdat deze ook in webformaten wordt opgeslagen. Ik merk op dat de tijd van GIF onherroepelijk ten einde loopt. In tegenstelling tot PNG heeft het slechts 256 kleuren en ondersteunt het geen doorschijnendheid.

Een cursor tekenen in Photoshop met een vector

Voor het grootste deel hoeven we geen cursor te tekenen, noch in Photoshop, noch in een andere grafische editor, omdat bijna geen van hen bestanden in cursorformaten kan opslaan cur of ani. En alleen speciale programma's die zijn ontworpen voor het tekenen van cursors kunnen in deze formaten opslaan, maar de meeste van deze programma's zijn hopeloos verouderd en worden niet bijgewerkt met Windows-tijden 98, of biedt slechte grafische beheeropties. Daarom stel ik voor om afbeeldingen te maken in het goede oude Photoshop, in plaats van hiermee om te gaan ala CursorEditor PRO, die alleen van Paint verschillen in de aanwezigheid van het alfakanaal.

Begin met creëren werkoppervlak Bestand > Nieuw en voor onze doeleinden zal de maat bij ons passen 120 op 120px met toestemming 72 dpi, kleurmodus RGB.

Een cursorvorm maken

Laten we eerst de cursorvorm maken. En een tool zal ons hierbij helpen, in de zak waarvan alles wat we nodig hebben al is gevuld - Aangepast vormgereedschap. En dit instrument is een type vectorgereedschap in Photoshop. Details van zijn werk zijn te vinden in mijn oude. Selecteer dit hulpmiddel en selecteer in het instellingenpaneel de cursorafbeelding. En ik zou dit specifieke formulier graag willen gebruiken omdat het perfect is voor de les. Als u niet over een dergelijk formulier beschikt, heeft u hoogstwaarschijnlijk niet alle sjabloonafbeeldingen geopend Aangepast vormgereedschap. Klik in hetzelfde venster op het ronde pijlpictogram en maak een keuze uit het menu Alle. Hierdoor worden bijna alle sjablonen van de tool geladen Aangepast vormgereedschap

Selecteer de gewenste pijl en druk op VERSCHUIVING en beweeg de cursor over het werkoppervlak. De optie is vereist in de gereedschapsinstellingen Vormlagen, waarover u meer informatie kunt lezen in mijn artikel. Kortom, dus Vormlagen creëert een opvullaag waaraan deze onmiddellijk hecht vectormasker. Dit is precies hoe een vector werkt in Photoshop.

De cursor transformeren in Photoshop

Nu moeten we het object transformeren. Hiervoor kiezen wij Bewerken > Vrije transformatie, waarover je meer kunt lezen in mijn artikel, en zien praktische toepassing V. Selecteer Bewerken > Vrije transformatie, zal het transformatieframe verschijnen. Plaats de cursor zo dat de punt zich in de linkerbovenhoek bevindt.

Laten we nu de cursor een beetje vervormen en dit is waarom. Je hebt waarschijnlijk gemerkt dat de standaardcursor niet van rechts naar links is gericht, maar van onder naar boven. Het is niet zomaar zo. Misschien zou grootvader Freid het beter hebben uitgelegd, maar psychologisch gezien is het veel gemakkelijker om een ​​wijzer waar te nemen die van onder naar boven wijst. Het is alsof je met je linkerhand begint te eten. Je kunt het onder de knie krijgen, maar is het niet gemakkelijker om het meteen te doen?

Selecteer opnieuw Bewerken > Vrije transformatie, Vouw eerst de cursor uit, verklein deze en klik vervolgens CTRL. Trek aan de hoeken van het transformatieframe, zonder het los te laten. Verplaats de kantelhoek dichter naar de linkerrand, zoals op mijn foto.

Een stijl op de cursor toepassen

Tot nu toe heb ik nog geen enkel artikel specifiek over het gebruik van stijlen geschreven, dus ik zal alles op een rijtje moeten zetten. Een stijl in Photoshop is een grafische skin die over een laag wordt getrokken. De stijl bestaat uit een aantal effecten die al lange tijd niet zijn veranderd. Maar dat is er wel goed nieuws: ze zijn voldoende om vrijwel alle afbeeldingen voor knoppen, kopteksten en banners te maken. En belangrijke opmerking. Aanvankelijk werden stijlen gemaakt in tegenstelling tot stijlen in een concurrerend programma Vuurwerk van nu niet meer bestaand Macromedia, voor het werken met webobjecten. Het eerste gebruik van stijlen is het maken van knoppen, banners, kopteksten en al het andere voor websites.

Kiezen Laag > Laagstijl> Mengopties of een alternatieve opening is door te dubbelklikken op de laag met de cursor in het deelvenster Lagen. Er verschijnt een dialoogvenster. Het venster bestaat uit twee gebieden: een menu aan de linkerkant en instellingen aan de rechterkant. Selecteer vanaf de linkerkant Stijl en u wordt naar de opgeslagen stijlen geleid die al in Photoshop zijn vastgelegd. En als je daar niets hebt, dan heb je de sjablonen niet gedownload. Klik op de ronde knop met rechterkant en selecteer uit het menu Web. Hierdoor worden alle stijlen uit de websectie geladen. En eigenlijk kun je daar stoppen, want je kunt eenvoudig elke stijl selecteren, toepassen en voila, een prachtige cursor is klaar.

Maar ik zou graag de onze willen creëren eigen stijl. Dat is waar ik aan denk. De cursor heeft een metallic stijl, een soort metalen cursor met veel schittering. Daarom, als je een stijl hebt toegepast, selecteer dan een wit vierkant met een rode streep - hierdoor wordt alles uitgeschakeld, laten we overschakelen naar het eerste effect Verloopoverlay in hetzelfde venster gaan we verder met de instellingen.

Klik op de verloopbalk en pas de kleuren aan van wit naar blauwgrijs - 535b5e. Selecteer in Verloopstijlen Radiaal, dat wil zeggen een bolvormige gradiënt. En u kunt de locatie van het verloop op elk gewenst moment op de cursor plaatsen door gewoon op te klikken werkgebied, waar de cursor wordt getekend, wanneer instellingen openen stijl Verloopoverlay en verplaats het verloop direct met uw muis. En op mijn schermafbeelding in het lagenpaneel zie je de rest van de stijleffecten die momenteel onzichtbaar zijn. Geen probleem, wij schakelen ze ook in serie.

Laten we nu het effect instellen Satijn. Wat is dit? Dit is een zijdeachtig materiaal. En de hoofdtaak van het effect Satijn creëer iriserende highlights, ongeveer hetzelfde als op het originele materiaal. Van kracht Satijn selecteer de mengmodus Mengmodus - Levendig licht En wit. Hierdoor ontstaat een harde contrasterende tint wanneer u het satijn over het verloop aanbrengt. De rest van de instellingen zijn naar wens, of gebruik de mijne.

Schakel nu in Afschuining en reliëf creëert het pseudo-3D-effecten door een laag aan één kant te markeren donkere kleur met het andere licht. Hierdoor wordt visuele driedimensionaliteit verkregen.

Voor het geval dat, hier zijn de effecten die we hebben bereikt als alle instellingen correct zijn. En als u het selectievakje hebt aangevinkt Voorbeeld, dan zie je direct onder de knop een voorbeeld van het effect Nieuwe stijl aan de rechterkant van het raam.

EN Innerlijke schaduw creëren innerlijke schaduw, waarbij de randen van de cursor worden benadrukt. Gebruik jouw instellingen, of herschrijf de mijne, het is niet zo belangrijk. En als jouw stijl klaar is, kun je altijd op de knop klikken Nieuwe stijl en sla het op in het stijlarchief.

Laatste stijl - Innerlijke gloed, waardoor interne verlichting ontstaat. Uiteraard in de blend-modus Levendig licht, bij instelling Verstikking 20 maat Maat 8. En nu, mijn vrienden, zijn we klaar met het stylen van onze cursor. Klik op de knop Nieuwe stijl en sla de stijl op in het Photoshop-geheugen.

Voeg lagen samen en maak de cursor kleiner

We zijn bijna klaar met het tekenen van de cursor, en zoals je kunt zien, in tegenstelling tot alle cursors, soortgelijke programma's we hebben niet met een penseel geschilderd, we hebben de muis niet door het werkgebied bewogen, waardoor er een soort leem ontstond. Het enige dat we deden was een vorm tekenen met een vector en op de instellingen klikken om het originele uiterlijk van de cursor te creëren. Bovendien hebben we een geweldige Metallic-stijl met hoogtepunten opgenomen. En laten we nu verder gaan met de laatste fase van het werken aan de cursor. Maar schakel eerst de achterste laag in het lagenpaneel uit. witte achtergrond. We hebben het niet langer nodig en we willen niet dat het samen met het bestand wordt opgeslagen. We hebben alleen een cursor en een transparante achtergrond nodig.

Selecteer nu alle lagen, gebruik VERSCHUIVING. Ga dan naar Lagen > Lagen samenvoegen Ik ben in de eerste plaats niet bang om de afbeelding samen te voegen en mijn vectoromtrek te verliezen, omdat deze niet veel waarde heeft omdat we hem in 3 minuten hebben gemaakt. Bovendien heb ik de gemaakte stijl opgeslagen en kan ik deze met één klik op alles toepassen. Als u echter denkt dat u deze laag nog steeds nodig heeft, sla deze dan op PSD. Daarom voeg ik de lagen samen. Nu gaan we de cursor kleiner maken, omdat cursors meestal vrij klein zijn; ze nemen niet de helft van het scherm in beslag, of zelfs maar 200 px. Dit is hun cursorbetekenis.

Natuurlijk kan ik altijd het selectievakje gebruiken Schaalstijlen in het raam Afbeeldingsgrootte en Photoshop zal proberen de stijl te schalen, maar zal dit niet betrouwbaar genoeg kunnen doen en de stijl zal nog steeds werken. Ik wil lagen samenvoegen om de bijgevoegde stijl naar pixels te converteren, omdat het voor ons erg belangrijk is dat de kleine cursor er hetzelfde uitziet als de grote. Nu de lagen zijn samengevoegd, hebben we nog maar één laag met de cursor in het raster. Ga naar Afbeelding > Afbeeldingsgrootte en formaat wijzigen vanaf 120 op 120px op 32 op 32px. En we hebben praktisch onze cursor gemaakt.

Cursor opslaan in PNG

Open Bestand > Veilig voor Web en apparaten en dit venster is speciaal ontworpen om afbeeldingen voor internet, telefoons en tablets op te slaan en te optimaliseren. In het venster dat verschijnt, ziet u drie gebieden. Middengebied met afbeelding. Linkergedeelte met gereedschap. En het juiste gebied met instellingen. Selecteer in het rechterdeelvenster PNG24 uit het vervolgkeuzemenu en vergeet niet het vakje aan te vinken Transparantie, dat een alfakanaal aan het bestand toevoegt en een deel van de afbeelding verbergt. En dit zijn alle instellingen voor onze cursor. Klik OK.

Hoe maak je een cursor in CUR-formaat

We hebben praktisch een cursor gemaakt, maar het is nog steeds een afbeelding in het formaat PNG met de afbeelding van de cursor, en niet met de cursor zelf. Je kunt het niet gebruiken in het besturingssysteem, je kunt het niet in de code voor een website stoppen. Een echte cursor is in de eerste plaats een type systeembestand waaraan een cursorafbeelding is gekoppeld. Het formaat van een dergelijk bestand is afhankelijk van besturingssysteem. Voor Ramen ze zijn alleen voor Mac-besturingssysteem ander. We zullen het hebben over het formaat CUR. Dit is een statisch formaat voor een cursor die werkt met Ramen.

Aan het begin van dit artikel zei ik dat programma's like CursorEditor. Helaas worden de meeste van hen betaald of hebben ze een proefperiode 30 dagen, A grafische mogelijkheden Al deze programma's laten veel te wensen over. Ik heb een tiental vergelijkbare programma's geprobeerd en naar mijn mening is dit de beste IcoFX. De officiële website vindt u hier. U kunt IcoFX hier downloaden. Hier kunt u enkele lessen zien over het werken met dit programma. En het belangrijkste voordeel IcoFX— het kan gratis en zonder worden gedownload proefperiode, Door ten minste voor nu. Het werkt met de meeste pictogram- en cursorformaten voor grote besturingssystemen. En haar vermogen om te creëren grafisch ontwerp aanzienlijk hoger dan andere old school-programma's. Er is doorschijnendheid, veel penselen en verlopen en basishulpmiddelen, maar dit alles is niets in strijd met de mogelijkheden van Photoshop, dus ik zal niet bij het programma stilstaan IcoFX. Download het gewoon en laten we deze cursor al maken!

Open PNG en sla het op in CUR

Openen in het programma IcoFX ons PNG. Bestand > Openen. Selecteer in het dialoogvenster Draagbare netwerkafbeelding (*.png) om bestanden in het formaat te bekijken PNG. Gevonden, klik OPEN.

Dit is waarschijnlijk het enige dat gedaan moet worden. Laten we deze afbeelding nu in het formaat opslaan CUR. Open Bestand > Opslaan als en selecteer het formaat in het venster dat verschijnt Windows-cursor (*.cur). En dat is alles. We hebben zojuist een werkcursor in het vereiste formaat gemaakt.

De cursor laden in Windows

Ik werk mee Windows Vista, echter op anderen Windows-instellingen hetzelfde. Druk in de linkerbenedenhoek van het scherm op de START-knop. Selecteer Configuratiescherm in het vervolgkeuzemenu. Selecteer Muis in het venster dat verschijnt.

Selecteer het tabblad in het dialoogvenster dat verschijnt Wijzers en druk op de knop Blader. Zoek in het nieuwe dialoogvenster uw cursor in het formaat CUR en download het. En onthoud dat dit slechts de eerste cursor in deze verzameling is. Om een ​​hele reeks cursors te maken, moet u cursors tekenen voor alle statussen van het besturingssysteem, een wachtcursor, een cursor wanneer u over een link zweeft, een cursor wanneer u over een formulier met tekst zweeft, enzovoort. Of vervang ze allemaal door een enkele als je geen situationele cursors nodig hebt.

Cursor voor de site

Als je een cursor voor een website wilt gebruiken, dan heb je allereerst een cursorbestand in het formaat nodig CUR, dat moet worden geüpload naar de sitehosting en de geregistreerde locatie CSS plaats. Hoe u dit moet doen, staat gedetailleerd beschreven op de HTMLBook-website, die gespecialiseerd is in HTML En CSS. En onthoud dat het formaat CUR werkt alleen voor de site voor de gebruikers die er gebruik van maken Ramen.

Misschien vertel ik je de volgende keer hoe je een geanimeerde cursor kunt maken, vergelijkbaar met degene die verschijnt wanneer het besturingssysteem vastloopt. Naar volgende artikelen op de website www.site

Cursors begeleiden de gebruiker tussen de objecten die op het beeldscherm worden weergegeven. We houden voortdurend zijn locatie in de gaten en sturen hem met de muis naar hem toe de gewenste knop of naar venstertitels helpen cursors ons bij het tekenen en invoeren van tekst, het regelen van het afspelen van muziek en films, en het werken met bestanden en mappen. Zonder cursor is het een echte ramp. Omdat het voortdurend voor onze ogen opdoemt, is het misschien tijd om de cursor een ander uiterlijk te geven? Het RealWorld Cursor Editor-programma is een cursoreditor waarmee u het uiterlijk van een cursor kunt maken en bewerken, of het nu een gewone aanwijzer of een klok is terwijl u wacht op een toepassingsantwoord, een tekstcursor of een linkcursor. Het maken van een eenvoudige aanwijzer of een spectaculaire geanimeerde cursor kost niet veel tijd.

Cursors maken

De RealWorld Cursor Editor-app werkt met beide statische beelden cursors en geanimeerde. Het programma heeft veel tools voor het maken en bewerken. Het maken van een cursor is mogelijk "vanaf nul" - gebaseerd op de verbeeldingskracht en het enthousiasme van de gebruiker, op basis van een afbeeldingsbestand of op basis van een afbeelding van het klembord. RealWorld Cursor Editor werkt met lagen en de belangrijkste hulpmiddelen zijn potlood, kleurvulling, tekstinvoer, vormtekenen, gum, pipet, retoucheren, hotspot en perspectief. U kunt de helderheid, het contrast en de verzadiging van de cursor aanpassen en verschillende effecten toepassen. Dankzij functies die in het programma zijn geïmplementeerd, zoals het aansluiten van extra plug-ins, worden de mogelijkheden en effecten van RealWorld Cursor Editor uitgebreid. Add-ons kunnen met één klik vanuit het hoofdeditorvenster worden gedownload en geïnstalleerd.

Het boeit je niet langer en je besluit het te veranderen in iets aantrekkelijker en interessanter, maar je weet niet waar je moet beginnen, begin met het eenvoudigste: het vervangen van de standaard muiscursor.

Er zijn genoeg programma's te vinden om de cursor "snel" te vervangen, maar als je een creatief persoon bent, ben je misschien geïnteresseerd om zelf zo'n cursor te maken, zonder toevlucht te nemen tot kant-en-klare ontwerpoplossingen. Voor dit doel heb je nodig speciale redacteur- klein gratis programma RealWorld Cursor-editor

Algemene informatie over RealWorld Cursor Editor 2012

In wezen deze applicatie is een eenvoudige grafische editor met een set standaard- en gespecialiseerd gereedschap. Hiermee kun je professionele en unieke cursors maken met verschillende effecten. Naast eenvoudige statische cursors kunt u met het programma zowel geanimeerde als prachtige 3D-cursors maken op basis van meerlaagse afbeeldingen.

U beschikt ook over hulpmiddelen als potlood, vulling, vormen, retoucheerpenseel, lijnen, pipet en verschillende effecten - schaduw, tekst, schuine kant, perspectief, vloeiend maken, verscherpen, vervagen, kleur, enz. Kortom, er is voldoende ruimte om uw fantasie de vrije loop te laten.

Basishulpmiddelen

Downloaden nieuwste versie De applicatie is volledig gratis van de website van de ontwikkelaar. Nadat het programma is geïnstalleerd (een kwestie van seconden), selecteert u op het tabblad Online nodig je tong. In totaal ondersteunt Cursor Editor ongeveer vijfenveertig talen, waaronder Russisch. RealWorld Cursor Editor is een genot om mee te werken.

De applicatie heeft een eenvoudige, gebruiksvriendelijke interface met veel voorbeelden van het maken en bewerken van cursors. En het proces van het maken van een cursor zelf is als een spannend spel. Trouwens, als je geïnteresseerd bent computerspellen misschien moet je downloaden Minecraft-spel– een fascinerende 3D-bouwset met verbluffende visuele effecten.

Een gewone afbeelding kan worden gebruikt als basis voor de toekomstige cursor JPG-formaat of PNG, leeg rasterafbeelding gemaakt met behulp van de Cursor Editor zelf, evenals een cursor uit .

Wanneer u een geheel nieuwe cursor maakt, kunt u de grootte en kleurdiepte ervan opgeven. We weten niet eens of het de moeite waard is om de volgorde van acties uit te leggen bij het werken met dit prachtige programma? Nauwelijks. Als je minstens één keer een gemiddelde grafische editor met ondersteuning voor lagen hebt geopend, getekend of op zijn minst geprobeerd hebt te tekenen, dan kun je gemakkelijk omgaan met RealWorld Cursor Editor.

Dus nadat de cursor is getekend, hoeft u deze alleen nog maar in het juiste formaat op te slaan. Als het een eenvoudige, statische cursor is, selecteert u het CUR-formaat; deze is geanimeerd en selecteert vervolgens ANI; er is ook een RCU-formaat voor meerlaagse cursors. Je kunt ook een nieuwe installeren op een standaard manier via het Configuratiescherm (in de muiseigenschappen) of in de Cursoreditor zelf.

Hiervoor beschikt het programma over een apart tabblad “Indicatoren”. Vergeet trouwens niet dat je niet alleen een gewone aanwijzer kunt vervangen, maar ook elke andere, bijvoorbeeld een hulpaanwijzer, verplaatsen (slepen) of een link selecteren (de bekende pen met een wijzende vinger).

Kortom

Ik moet zeggen dat we aangenaam verrast waren door de verscheidenheid aan bewerkingstools die dit ogenschijnlijk eenvoudige en gratis programma bood. Het enige dat mij van streek maakte, was de zeer beperkte set kant-en-klaar animatie-effecten, alles moet met de hand gebeuren, en hier heb je, hoe je het ook bekijkt, werkervaring nodig.

Dit is echter niet zo belangrijk, maar wat belangrijk is, is dat het programma echt werkt en zijn taak perfect aankan.