Share
Ce veți creaÎn următorul tutorial veți învăța cum să creați o interfață detaliată a jocului Tetris în iDraw. Pentru început, veți învăța cum să configurați o rețea și cum să creați forma principală utilizând tehnici de bază și tehnici de construire a formei vectoriale. În continuare, veți învăța cum să adăugați umbre și accente pentru forma principală utilizând numai panoul Efecte.
Deplasând-o, veți învăța cum să creați o rețea întunecată utilizând pluginul Creare Rectangular Grid. Profitând pe deplin de caracteristica Snap to Grid și utilizând instrumentele de bază și tehnicile de amestecare, veți învăța cum să creați fragmentele de bucăți Tetris.
În cele din urmă, veți învăța cum să creați cu ușurință toate piesele Tetris.
Pentru acest tutorial vom crea un nou 600 x 600 pixeli document. Alege Fișier> Nou (Command-N) să aducă Document nou panoul. Selectează Grilă document stil, setați unitățile de document la pixeli, și setați dimensiunile documentului la 600 pixeli lățime de 600 pixeli înălțime.
Apoi, vom configura grila de documente. Treceți la Grilă în panoul din Proprietăți panoul. În cazul în care Proprietăți panoul nu este vizibil în prezent, puteți face clic pe pictograma de riglă portocalie de deasupra straturi pentru a afișa și a ascunde panoul. Schimbați grila Spațierea X și Y Spacing la 5 px, Seteaza subdiviziunile la 0 px, și permite Snap to Grid (Command-Shift-).
Concentrați-vă pe Bara de instrumente și veți observa că, în mod prestabilit, culoarea de umplere este setată pe alb și culoarea cursei este setată pe negru. Pur și simplu faceți clic pe culoarea cursei bine și glisați Alfa glisați la 0%, care va face accidentul invizibil. Alegeți Instrument rotunjit dreptunghiular (M), focalizați pe Bara de Titlu și trageți Raza de colț glisați la 5 pt. Deplasați-vă pe panza și creați-o 240 x 340 px formă. Utilizând grila și Fixat la retea facilitate vă va ușura munca.
Asigurați-vă că forma dvs. rămâne selectată și se concentrează pe Efecte secțiune din Aspect panoul. În cazul în care Aspect panoul nu este vizibil în prezent, puteți face clic pe pictograma albastră de deasupra straturi pentru a afișa și a ascunde panoul. Concentrați-vă pe Completati și selectați Gradientul liniar de la Tip meniul derulant. Setați unghiul la 90 de grade și apoi treceți la glisoarele de gradient. Selectați cel din stânga și setați culoarea la R = 44 G = 44 B = 54. Apoi selectați cea dreaptă și setați culoarea R = 65 G = 65 B = 74. Pur și simplu faceți clic pe bara de gradient și veți obține un cursor gradient nou. Selectați-l, setați culoarea la R = 54 G = 54 B = 65, și trageți-l spre stânga până la Locație simboluri de tooltip 25%.
Reveniți la Bara dvs. de instrumente, dați din nou clic pe culoarea de umplere și înlocuiți culoarea existentă cu un alb simplu. Prindeți Instrumentul dreptunghiular (M), concentrați-vă pe pânză, creați o 220 x 300 px formați-o și plasați-o așa cum se arată în imaginea următoare.
Utilizarea Mutați instrumentul (V), selectați ambele forme realizate până acum, focalizați pe Instrumente de cale secțiune din Proprietăți și faceți clic pe Scădea buton. Forma rezultată ar trebui să arate ca în a doua imagine. Deplasați-vă la straturi deschideți stratul existent și veți găsi forma. Pur și simplu faceți dublu clic pe numele său și redenumiți-l "cadru".
Asigurați-vă că "cadru"forma rămâne selectată, se concentrează pe Efect secțiune din Aspect și verificați caseta mică care reprezintă cea existentă Accident vascular cerebral pentru ao activa. Trageți Lăţime glisați la 1pt, Selectați Interior de la Poziţie meniul derulant și Lumina slaba de la Amestec drop-down meniu, apoi faceți clic pe caseta de culoare care vine de la dvs. Accident vascular cerebral. Trageți Alfa glisați la 30% și setați culoarea albă (R = 255 G = 255 B = 255).
Asigurați-vă că "cadru"forma rămâne selectată, continuați să focalizați pe Efect secțiune din Aspect și adăugați o secundă Accident vascular cerebral utilizând butonul plus situat în colțul din stânga jos al panoului. Selectați acest nou Accident vascular cerebral și introduceți atributele afișate în imaginea următoare.
Asigurați-vă că "cadru"forma rămâne selectată, continuați să focalizați pe Efect secțiune din Aspect și adăugați oa treia Accident vascular cerebral folosind același buton plus. Selectați acest nou Accident vascular cerebral și introduceți atributele afișate în imaginea următoare.
Asigurați-vă că "cadru"forma rămâne selectată, continuați să focalizați pe Efect secțiune din Aspect și activați funcția existentă Umbra interioara efect. introduce 1 în Y și 0 în celelalte două casete, selectați Lumina slaba față în față Amestec drop-down meniu, apoi faceți clic pe caseta de culoare care vine de la dvs. Umbra interioara efect. Trageți Alfa glisați la 25% și setați culoarea albă. În cele din urmă, trageți acest efect chiar deasupra părții de jos Accident vascular cerebral.
Asigurați-vă că "cadru"forma rămâne selectată, continuați să focalizați pe Efect secțiune din Aspect și adăugați o secundă Umbra interioara folosind același buton plus. Selectați acest nou efect și introduceți atributele afișate în imaginea următoare.
Asigurați-vă că "cadru"forma rămâne selectată, continuați să focalizați pe Efect secțiune din Aspect și adăugați oa treia Umbra interioara. Selectați acest nou efect și introduceți atributele afișate în imaginea următoare.
Asigurați-vă că "cadru"forma rămâne selectată, continuați să focalizați pe Efect secțiune din Aspect și adăugați un al patrulea rând Umbra interioara. Selectați acest nou efect și introduceți atributele afișate în imaginea următoare.
Reveniți la Bara de instrumente Google, asigurați-vă că Accident vascular cerebral este invizibil și setați Completati culoarea la R = 54 G = 54 B = 65. Prindeți Instrumentul dreptunghiular (M), creeaza o 220 x 300 px și așezați-o exact așa cum este prezentat în imaginea următoare.
Asigurați-vă că dreptunghiul dvs. este încă selectat, focalizați pe Efect secțiune din Aspect fereastră, activați funcția existentă Accident vascular cerebral, și introduceți atributele afișate în imaginea următoare.
Asigurați-vă că dreptunghiul dvs. este încă selectat, focalizați pe Efect secțiune din Aspect și activați funcția existentă Stralucire interioara efect. Trageți mărimea glisați la 5 pt, Selectați Lumina slaba de la Mod amestec drop-down meniu, apoi faceți clic pe caseta de culoare care reprezintă acest efect. Trageți Alfa glisați la 20% și setați codul de culoare pe negru (R = 0G = 0B = 0). În cele din urmă, trageți asta Stralucire interioara efect între cele existente Completati și Accident vascular cerebral.
Pentru acest pas veți avea nevoie de Creați o rețea dreptunghiulară plugin care poate fi descărcat de pe site-ul iDraw. Reveniți la iDraw și mergeți la Fișier> Plugin> Gestionați pluginurile. Trageți-vă Creați o rețea dreptunghiulară plugin în dosarul nou deschis și apoi închideți-l.
Reveniți la fișierul iDraw și de data aceasta mergeți la Fișier> Plugin> Creare grilă dreptunghiulară. introduce 29 în Linii orizontale și 21 în Linii verticale caseta, setați Lăţime la 220 px si Înălţime la 300 px, apoi faceți clic pe O.K buton. Asigurați-vă că acest nou grup de căi rămâne selectat și că focalizați pe Efect secțiune din Aspect panoul. Faceți clic pe caseta de culoare care reprezintă cea existentă Completati și trageți pur și simplu Alfa glisați la 0%.
Asigurați-vă că grupul dvs. de căi orizontale și verticale este încă selectat și păstrați focalizarea pe Efect secțiune din Aspect panoul. Selectați existența Accident vascular cerebral, trageți Lăţime glisați la 2 pt, lucrurile ar trebui să arate astfel:
Uitați-vă mai îndeaproape la un colț al grupului dvs. de căi și veți observa un mic decalaj. O vom rezolva în acest pas. Asigurați-vă că întregul grup de căi orizontale și verticale este selectat și pur și simplu lovit Shift-Command-G la Degrupeaza aceasta. Acum, concentrați-vă pe straturi , selectați cele patru căi care alcătuiesc marginile exterioare ale rețelei și mergeți la Modificați> Conectați punctele finale. Luați o privire nouă la acest colț și distanța ar trebui să dispară.
Concentrați-vă pe straturi și reselectați toate căile care alcătuiesc grila dvs. neagră. Deplasați-vă la Instrumente de cale secțiune din Proprietăți și faceți clic pe Conturul conturului buton și apoi Uniune buton. Asigurați-vă că forma rezultată rămâne selectată și mergeți la Efecte secțiune din Aspect panoul. Concentrați-vă pe Completati și înlocuiți culoarea existentă cu R = 44 G = 44 B = 49. În cele din urmă, ar trebui să te duci la straturi și redenumiți forma realizată în acest pas "grilă".
Asigurați-vă că "grilă"forma rămâne selectată și se concentrează pe Efecte secțiune din Aspect panoul. Activați funcția existentă Umbra efect și introduceți atributele afișate în imaginea următoare.
Concentrați-vă pe Bara de instrumente, asigurați-vă că Accident vascular cerebral este invizibil, apoi setați Completati culoarea la R = 59 G = 59 B = 70. Utilizarea Instrumentul dreptunghiular (M), creeaza o 220 x 10 px formați-o și plasați-o așa cum se arată în imaginea următoare. Deplasați-vă la straturi și pur și simplu redenumiți dreptunghiul făcut în acest pas "separatorShadow".
Asigurați-vă că "separatorShadow"forma rămâne selectată, se concentrează pe Efect secțiune din Aspect și activați funcția existentă Lumină exterioară efect. Trageți mărimea glisați la 10 pt, Selectați Lumina slaba de la Mod amestec drop-down meniu, apoi faceți clic pe caseta de culoare care reprezintă acest nou efect. Trageți Alfa glisați la 30% și setați culoarea la negru.
Utilizarea Instrumentul dreptunghiular (M), creeaza o 240 x 10 px formați-o și plasați-o așa cum se arată în imaginea următoare. Deplasați-vă la straturi și pur și simplu redenumiți acest dreptunghi nou "separator"Asigurați-vă că acesta rămâne selectat și se concentrează pe Efect secțiune din Aspect panoul. Concentrați-vă pe cele existente Completati, Selectați Gradientul liniar de la Tip drop-down meniul și setați Unghi la 0 grade. Apoi treceți la glisoarele de gradient și introduceți atributele afișate în imaginea următoare. Amintiți-vă că puteți adăuga cu ușurință un nou cursor de gradient făcând clic pe bara de gradient.
Asigurați-vă că "separator"forma rămâne selectată și se concentrează pe Efect secțiune din Aspect panoul. Activați funcția existentă Umbra interioara efect și introduceți atributele afișate în imaginea următoare.
Asigurați-vă că "separator"forma rămâne selectată, continuați să focalizați pe Efect secțiune din Aspect și adăugați o secundă Umbra interioara folosind același buton plus. Selectați acest nou efect și introduceți atributele afișate în imaginea următoare.
Pentru restul pașilor, veți avea nevoie de câte o grilă 1 px, ceea ce înseamnă pur și simplu că trebuie să vă întoarceți la Grilă secțiune din Proprietăți și introduceți 1 px în ambele Spațiere cutii. Concentrați-vă pe Bara de instrumente, asigurați-vă că Accident vascular cerebral este invizibil și setați Completati culoarea la R = 0 G = 124 B = 215. Utilizarea Instrumentul dreptunghiular (M), creaza un 8 px pătrați și plasați-o exact așa cum se arată în imaginea de mai jos.
Asigurați-vă că pătratul tău albastru rămâne selectat și se concentrează pe Efecte secțiune din Aspect panoul. Activați funcția existentă Umbra efect și introduceți atributele afișate aici.
Asigurați-vă că pătratul dvs. albastru este încă selectat, continuați să focalizați pe Efecte secțiune din Aspect și adăugați o secundă Umbra. Selectați acest nou efect și introduceți următoarele atribute.
Întoarceți-vă la Bara de instrumente Google, asigurați-vă că Accident vascular cerebral este invizibil, apoi setați Completati culoare până la negru. Utilizarea Instrumentul dreptunghiular (M), creeaza o 1 x 8 px formați-o și plasați-o după cum se arată în prima imagine. Treceți la Instrumentul de selecție a traseului (A) și se concentrează pe partea dreaptă a acestui nou dreptunghi. Selectați punctul de ancorare de sus și trageți-l 1 px în jos, apoi selectați punctul de ancorare inferior și trageți-l 1 px sus. Aceasta ar trebui să transforme dreptunghiul dvs. într-un trapez, așa cum se arată în a doua imagine.
Asigurați-vă că trapezul negru este selectat și faceți o copie în față (Command-C, Command-Shift-V). Selectați această copie și mergeți la Modificați> Rotire> Flip orizontal. Asigurați-vă că copia dvs. este încă selectată și trageți spre dreapta așa cum se arată în prima imagine.
Acum, selectați ambele trapeze și apucați-l Rotiți instrumentul (R). Focalizați-vă pe Bara dvs. de Instrumente, setați Unghi la 90 de grade, și faceți clic pe Copie buton. În cele din urmă, lucrurile ar trebui să arate ca în a treia imagine.
Continuați să vă concentrați pe trapezoizii negri. Selectați cel din stânga și focalizați pe Efect secțiune din Aspect panoul. Trageți Opacitate glisați la 70% și selectați Lumina slaba de la Amestec meniul derulant.
Continuați să vă concentrați pe Efect secțiune din Aspect și selectați trapezoidul drept. Trageți Opacitate glisați la 50% și selectați Lumina slaba de la Amestec meniul derulant. Apoi, selectați trapezul inferior și schimbați-l Amestec la Lumina slaba.
În cele din urmă, selectați trapezoidul de sus și concentrați-vă asupra aceluiași Efecte secțiune din Aspect panoul. Înlocuiți existența Completati culoarea albă și trageți apoi Opacitate glisați la 50% și schimbați Amestec la Lumina slaba.
Concentrați-vă pe Bara de instrumente, asigurați-vă că Accident vascular cerebral este invizibil, apoi setați Completati culoarea albă. Utilizarea Instrumentul dreptunghiular (M), creeaza o 6 x 3 px formați-o și plasați-o după cum se arată în prima imagine. Treceți la Instrumentul de selecție a traseului (A) și se concentrează pe partea de jos a acestui nou dreptunghi. Selectați punctul de ancorare din stânga și apăsați butonul Șterge de pe tastatură pentru al elimina. Apoi selectați punctul de ancorare drept și trageți-l 3 px la stanga. În cele din urmă, dreptunghiul dvs. alb ar trebui să se transforme într-un triunghi așa cum se arată în a doua imagine.
Concentrați-vă pe Bara de instrumente, asigurați-vă că Accident vascular cerebral este invizibil, apoi setați Completati culoare până la negru. Utilizarea Instrumentul dreptunghiular (M), creați o secundă 6 x 3 px formați-o și plasați-o după cum se arată în prima imagine. Treceți la Instrumentul de selecție a traseului (A) și se concentrează pe partea superioară a acestui nou dreptunghi. Selectați punctul de ancorare din stânga și scoateți-l. Apoi selectați punctul de ancorare drept și trageți-l 3 px la stanga. În cele din urmă lucrurile ar trebui să arate ca în a doua imagine. Selectați ambele triunghiuri și apucați Rotiți instrumentul (R). Accesați Bara de Titlu, introduceți a 90 de grade unghi, apoi faceți clic pe acesta Copie buton.
Continuați să vă concentrați asupra formelor de triunghi. Selectați cel din stânga, înlocuiți-l pe cel existent Completati culoarea cu negru, apoi scade Opacitate la 30% și schimbați Mod amestec la Lumina slaba. Selectați triunghiul drept, micșorați-l Opacitate la 30% și schimbați Mod amestec la Lumina slaba. Selectați triunghiul dvs. de sus, glisați Opacitate glisați la 30% și schimbați Mod amestec la Lumina slaba. În cele din urmă, selectați triunghiul inferior, micșorați-l Opacitate la 80% și schimbați Mod amestec la Lumina slaba.
Utilizarea Instrumentul dreptunghiular (M), creeaza o 2 px pătrați și plasați-o așa cum se arată în prima imagine. Asigurați-vă că această nouă formă minusculă rămâne selectată și că vă concentrați pe Efecte secțiune din Aspect panoul. Trageți Opacitate glisați la 20%, Selectați Acoperire de la Amestec meniul derulant. Apoi, concentrați-vă pe Completati culoare și asigurați-vă că este setat la alb.
Resetați-vă dreptunghiul albastru împreună cu restul formelor folosite pentru ao evidenția și pur și simplu loviți Command-G la grup lor. Deplasați-vă la straturi și renumiți noul grup "albastru".
Asigurați-vă că "albastru"grupul este încă selectat și duplicat (Command-C, Command-V). Selectați noul grup, trageți-l în sus și plasați-l după cum se arată în prima imagine. Concentrați-vă pe straturi panou, redenumiți copia de grup "portocale"și apoi deschideți-l Selectați pătratul albastru care se află în interiorul"portocale"grupați și treceți la Efect secțiune din Aspect panoul. Concentrați-vă pe Completati și pur și simplu înlocuiți culoarea existentă cu R = 204 G = 78 B = 26. Acum, creați încă cinci copii de grup, împrăștiați-le după cum se arată în imaginea următoare și înlocuiți albastrul cu culorile prezentate în imaginea următoare. Nu uitați să vă redenumiți grupurile noi.
Multiplicați "albastru" grup (Command-C, Command-V) și răspândiți copii după cum se arată în prima imagine. După ce ați terminat, selectați toate "albastru"grupuri și grup lor (Command-G). Deplasați-vă la straturi și renumiți acest nou grup "ALBASTRU"Aceasta va fi prima ta piesă. Namingul și gruparea acestor forme vor face mult mai ușor pentru tine să le selectați, să le mutați sau să le multiplicați mai târziu.
Concentrați-vă pe restul grupurilor și folosiți-le pentru a crea celelalte șase piese, după cum se arată în imaginea următoare. Nu uita grup și numiți-le când ați terminat.
Acum, că aveți toate piesele dvs., înmulțiți-le și împrăștiați-le aproximativ ca în imaginea de mai jos.
Prindeți Instrument text (T), faceți clic pe pânza dvs. și apoi treceți la Text secțiune din Aspect panoul. Selectează DIN condensat font, fă-o Îndrăzneţ, și setați dimensiunea la 10 pt. Adăugați piesa de text prezentată în prima imagine, asigurați-vă că este așezată așa cum se arată mai jos, apoi treceți la Efect secțiune din Aspect panoul. Seteaza Text culoarea la R = 145 G = 145 B = 145 și activați cele existente Umbra efect. Apoi introduceți atributele afișate în imaginea următoare.
Selectați din nou Instrument text (T) și adăugați oa doua piesă de text. Utilizați aceleași atribute de text, adăugați piesa de text prezentată în prima imagine, asigurați-vă că este așezată așa cum se arată mai jos, apoi treceți la Efect secțiune din Aspect panoul. Seteaza Text culoarea la R = 255 G = 200 B = 0 și activați cele existente Umbra efect. Introduceți atributele afișate în imaginea următoare.
Iată cum ar trebui să arate. Sper că v-ați bucurat de acest tutorial și puteți aplica aceste tehnici în proiectele viitoare.
Accentsconagua