Съдържание
- Истински 3D
- 3D без очила
- Моята първа анимация за движение
- Как да направите анимирани GIF файлове
- Пробив
- Намаляване на бялото пространство
- Позициониране на съдържание на уеб страница
- Position.htm
- Wiggle 3D стереограми
- Със или без очила
- Още полезни връзки
Създадох програма, която прави анимирани GIF файлове от снимки и видеоклипове. След това го използвах за направа на 3D анимации.
Истински 3D
Погледнете компютъра или телефона си и всяко око вижда от различна гледна точка. Две снимки се комбинират заедно, за да образуват триизмерно изображение. Реалните 3D изображения са стереоскопични изображения. Ляво и дясно изображение се обединяват заедно. Докато носите слушалки или чифт очила, всяко око вижда различно изображение. Купих чифт триизмерни очила от анаглиф и започнах да правя изображения, които излизаха от екрана.
Истинските стереоскопични изображения могат да изглеждат страхотно. Изображението може да изглежда по-интересно от истинското. Направих снимка на моята чаша за кафе и тя се превърна в една от най-популярните ми снимки. Интересно е, защото дръжката изглежда излиза от екрана. Проблемът е, че повечето хора не могат да видят ефекта. Някои хора не виждат в стерео и повечето хора нямат специалните очила. Друг проблем е, че не изглеждат добре, когато се гледат без 3D очила.
Имайте предвид
Висококачествен чифт 3D очила струва около 8 долара.
3D без очила
Разделяне на дълбочина GIF файлове са анимирани GIF файлове с ленти. Изглежда, че изображенията се съдържат във вашия плосък екран. Поставянето на ленти върху картина може да изглежда така, сякаш лентите са пред всичко останало. Премахването на част от лента може да изглежда така, сякаш решетките са зад нещо. Когато обектът вече не е възпрепятстван от решетките, изглежда, че е пред тях. Решетките бяха съвсем отпред. След това изображение се премести покрай него. Така изглежда, че е пред екрана. Това е триизмерен ефект на пробив.
Махане стереоскопия се създава чрез бързо редуване между подобни изображения. Направете две снимки на една и съща тема от две различни гледни точки. След това направете анимиран GIF или видеоклип. Бързото превключване от една перспектива в друга може да добави видимост на дълбочината. И двете очи виждат и двете изображения, така че не е истинска стереоскопия.
Основното предимство на анимациите с разделена дълбочина и стереоскопичното размахване пред стереоскопичните изображения е, че те могат да осигурят триизмерен ефект без очила. Можете да получите някои интересни снимки и е лесно да ги споделите. Основните недостатъци са, че ефектът е ограничен и те могат да бъдат по-трудни за изпълнение. Реалните 3D изображения могат да осигурят по-голяма дълбочина и могат да бъдат направени за 30 секунди.
Моята първа анимация за движение
Как да направите анимирани GIF файлове
Анимираните GIF файлове се създават с помощта на поредица от снимки. Направете 2 или повече снимки или кратко видео. След това запазете изображенията като анимиран GIF. Те обикновено са малки и ниски. Повечето продължават да повтарят. За плавен преход началните и крайните снимки трябва да са подобни или еднакви. В горната анимация добавих изображенията по ред. След това добавих същите изображения в обратен ред. Завършва в началото.
Те са популярни онлайн, но гледането и работата с тях офлайн може да бъде трудно. Често получавате само първата снимка. Можех да преглеждам GIF файловете само на уеб страници, в имейли или чрез отваряне на изображенията с браузър. Щракнете с десния бутон на мишката и изберете "Отваряне с" предпочитания от вас браузър.Анимациите, които изглеждат добре на вашия компютър или уебсайт, могат да бъдат блокирани на сайтовете в социалните медии, ако размерите са твърде големи.
За да запазите видео или поредица от изображения като анимиран GIF, ще трябва да намерите програма или да направите своя собствена. Онлайн GIF производителите са лесни за намиране. Можете също така да използвате програма за рисуване като Photoshop. Всичките ми анимации са направени с помощта на 3D GIF Maker, който направих, докато се учех как да правя триизмерни изображения, които не изискват специални очила.
GIF файловете имат по-малко цветове. Така намалява качеството на изображенията. Може да искате да правите анимациите като видеоклипове, WebP файлове или APNG файлове. APNG използва PNG изображения за анимация вместо GIF файлове. С тези алтернативи получавате по-добро качество и по-малък размер на файла. Недостатъкът е, че е по-малко вероятно да играете. Когато бях прикачен към имейл, трябваше да запазя PNG файла и да го отворя в уеб браузър, за да видя анимацията.
Използвах TinyPNG, за да намаля размера на анимацията на „Междузвездни войни“ със 70%. За възможно най-малък размер препоръчвам WebP или видео. Лесно е да направите кратко видео да се държи като анимиран GIF на уеб страница. Видео елементът в кода по-долу възпроизвежда първото видео, което работи с браузъра на потребителя. Елементът на картината показва първата картина, която работи.
контур за автоматично възпроизвеждане на видео заглушен вграден заглавие = "3D анимация"> източник src = "3DVid.webm" type = "video / webm"> source src = "3DVid.mp4" type = "video / mp4"> / video> picture> source srcset = "3DAnimation.webp" type = "image / webp"> img src = "3DAnimation.gif"> / picture> Още един трик Направете бариери и граници. След това пробийте през тях.
Пробив
Ефектът на пробив на екрана работи по-добре, когато обектите се приближават до камерата. С приближаването става малко по-голям. Добавянето на ленти не е единственият начин да направите изображението да изглежда триизмерно. Вие създавате оптична илюзия. Опитайте се да подлъжете зрителя да направи грешни предположения, като направите фалшиви граници.
За анимацията на резервоара успях да използвам филтър, за да изтрия цвета на фона. Най-трудната част не е случайно изтриване на движещия се обект, докато премахвате цветовете на фона. Във втората анимация използвах прозрачно изображение на призрак от обществено достояние. Всичко, което трябваше да направя, беше да променя размера на призрака 50 пъти и получих моята програма да направи това вместо мен.
Горната снимка изглежда има много празно пространство под нея. Тъй като снимката трябва да изглежда по-малка, отколкото е разстоянието между нея, а другото съдържание на страницата трябва да бъде сведено до минимум. Белите пространства могат да бъдат намалени чрез добавяне на текст или изображения към фона на картината или чрез поставяне под тях. Добавих малко текст към картината, но можех да направя и повече. Ако изображението по-горе имаше прозрачен фон, щях да мога да го поставя на уеб страница с текст под него под фоновото изображение. Анимацията ще бъде върху друго съдържание, но текстът ще бъде видим, докато духът не е над него. Ефектът на пробив работи най-добре, когато фонът на страницата съвпада с изображението. Направих изображенията на тази страница за бял фон. Прозрачните фонове винаги съответстват на фона. Вместо да има бяло около фоновото изображение, то може да е със същия цвят като областта около него. Вижте дали създателят на GIF или програмата за рисуване, която използвате, ви позволява да създадете прозрачен фон. Типовете файлове, които поддържат прозрачност, включват PNG, WebP, WebM, Mov и GIF. Изображенията и видеоклиповете могат да бъдат прозрачни. За да видите пример, разгледайте моята анимация на Междузвездни войни. Отворете го в нов раздел, за да го видите с черен фон. Не препоръчвам да правите GIF файлове с прозрачен фон. Гладките ръбове могат да станат назъбени.
Намаляване на бялото пространство
Позициониране на съдържание на уеб страница
Кодът по-долу променя позицията на текста на страницата, така че да е под изображението. GetBoundingClientRect получава местоположението и размерите на изображението. Позицията му казва, че позицията се задава с помощта на кода на страницата. Задаването на лявата и горната стойност му казва къде трябва да се появи текстът. Можете да копирате кода и да го запазите в текстов редактор като NotePad в директория със снимка.
Името на файла "transparent.gif" трябва да бъде променено на файла, който искате да използвате. За най-добри резултати използвайте прозрачен GIF. Файлът ще се отвори в уеб браузъра ви по подразбиране. Промяната на позицията на съдържанието на уеб страница може да бъде много полезна за специални ефекти, игри и онлайн редактори на изображения.
Position.htm
! DOCTYPE html> html> head> meta charset = "utf-8"> meta id = "viewport" name = "viewport" content = "user-scalable = no, initial-scale = 1, width = device-width, height = device-height "/> title> Moving Text Under a Picture / title> / head> body> center> img id =" pic1 "style =" max-width: 90% ";> div id =" div0 "style = "font-size: 120%; text-align: justify; visibility: hidden;"> Направете прозрачно изображение да изглежда по-малко, отколкото е, като поставите текст или изображения под него. / div> div id = "div1" style = "position : абсолютен; размер на шрифта: 120%; поле вляво: автоматично; поле вдясно: автоматично; ширина: 100%; изравняване на текст: оправдание; zIndex: 0 "> / div> / center> script> var Pic1 = документ .getElementById ("pic1"), Div0 = document.getElementById ("div0"), Div1 = document.getElementById ("div1"); функция onload () // готов {Pic1.onload = функция () {Pic1.onload = ""; const rect = Pic1.getBoundingClientRect (); var LeftMargin = rect.width *. 14; Pic1.style.marginLeft = LeftMargin + "px"; Div0.style.width = rect.width + LeftMargin + "px"; Div1.style.width = Div0.style.width; const rect2 = Div0.getBoundingClientRect (); Div1.innerHTML = Div0.innerHTML; Div1.style.left = rect2.left + "px"; Div1.style.top = (rect.top + rect.height *. 85) + "px"; Div0.style.display = "няма"; } Pic1.src = "transparent.gif"; }; window.onload = onload (); Div1.style.zIndex = "-1"; / script> / body> / html>
3D изображения
GIF с разделена дълбочина са почти 3D.
Wiggle 3D стереограми
Стереограмите са изображения, които комбинират лява и дясна перспектива. Различните ъгли им позволяват да се виждат в 3D. Уигъл изображенията трябва да могат да осигурят истински 3D ефект без очила. Те могат да добавят дълбочина, но изглежда само влизат в или зад екрана. За да ги направите, трябва само две или три изображения. Лява, дясна и незадължителна преходна снимка, направена между ляво и дясно. Средната снимка ще се използва два пъти.
Направата на размахване на GIF файлове е наистина лесна, но може да е трудно да се направят такива, които хората обичат да гледат. Ограничете количеството на разклащане. Обикновено искате и двете снимки да са фокусирани върху основния обект, така че обектът на картината да не се движи. Не трябва да изглежда, че записвате земетресение.
Частично 3D изображения Движещите се стереограми се виждат и от двете очи, така че да не получите пълния ефект.
Със или без очила
Wiggle стереоскопията е като евтино отблъскване на истинските стереоскопични изображения. Изображенията са нестабилни и не изскачат достатъчно далеч от екрана. Реалните 3D изображения изглеждат много по-добре, но изискват специални очила. Използвайте стегната стереоскопия, ако искате повече хора да видят ефекта. Използвайте истински 3D за по-добри резултати. Можете да използвате едни и същи снимки, за да направите и двете.
Анимираните GIF файлове с разделена дълбочина не осигуряват реален 3D ефект и за тях се изисква повече време и усилия. Те са склонни да бъдат по-интересни за гледане, отколкото да мърдат стереоскопични изображения. Така че мисля, че си заслужават допълнителните усилия. Харесаха ми резултатите, които получих, когато добавих ленти, но любимите ми изглежда оставят картината.
Ако се интересувате от правене на триизмерни снимки, тогава препоръчвам да вземете чифт триизмерни очила, за да можете да правите истински 3D, размахани 3D и анимации с разделена дълбочина. Направете изображения, които изглеждат добре с очилата и такива, които изглеждат добре и без тях. Изображенията на тази страница са едни от първите анимации, които направих. Все още се учех как да ги правя и нямах много практика. Използвайте ги като примери, но се опитайте да се справите по-добре.
Още полезни връзки
- Как да създадете 3D изображения и видеоклипове без триизмерна ...
Научете как да конвертирате 2D в 3D. Правенето на триизмерни снимки може да бъде лесно и бързо. Мога да направя добро триизмерно изображение за 30 секунди. Защо да се задоволявате с плоски снимки, когато можете да добавите илюзията за дълбочина. Изискват се специални очила, но те а - Как да станем невидими на камерата с помощта на видеоефекти от невидимост - резултати от експерти
Искате ли да станете невидими? Експериментирах, за да видя дали мога да виждам през обектите на уеб камерата си, като направих цветовете прозрачни. Научете как работи невидимостта и как лесно да станете невидими, като използвате ефект на невидимост.
