Нұсқауға болатын суреттердің өлшемі: 13 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:26

Сізде кескіндерді дұрыс мөлшерде алуға қиындықтар бар ма? Сіздің суреттеріңіздің өлшемі тым үлкен бе және жоғарыдағыдай кадрдан асып кетеді ме? Бұл мәселені шешуге үйренгендерімді қорытындылауға тырысатын нұсқаулар.

Маған Instructable Staff барлық жүктелген кескіндер әр түрлі пропорцияларда көшірілетінін айтты. Бұл суреттер бассейні нұсқаулықты қай құрылғыдан қарап отырғаныңызға байланысты әр түрлі болады және әр түрлі болады. Кәдімгі редакторда қандай өлшем мен қатынасты көрсету керектігін көрсету әдісі жоқ.

Содан кейін олар «Егер сіз дәстүрлі пропорциялы суреттерді жүктесеңіз, жұмыс істейтін тағы бір нұсқа. 16: 9 -дан 4: 3 -ке дейінгі кез келген нәрсе өте жақсы көрсетілуі керек» деп ұсыныс жасады.

Назар аударыңыз, олар бұл «мүмкін» дейді. Міне, мен суреттерімді лайықты түрде көрсету үшін күресте тапқандарым. (Назар аударыңыз, мен «Рубик текшесі жеңіл» нұсқаулықтан суреттерді қолданамын, сондықтан барлық текше суреттері!)

Жоғарыда келтірілген кескін - оның бастапқы өлшемі (600x195), ол дәстүрлі пропорциялар ауқымында емес. Көріп отырғаныңыздай, Instructables бұл суретті тым үлкен етіп көрсетеді, сол және оң жақтары кесілген. Бұл суретті дұрыс көрсету үшін не істеу керектігін қарастырайық.

1 -қадам: 16: 9 аспектілік пропорциясын қолданып көрейік

Ендеше 16: 9 (ені: биіктігі) пропорциясын қолданып көрейік. Мен ені 600 пиксельді сақтаймын, 16: 9 биіктігі 338 пиксель болуы керек, сондықтан біз 600x338 кенептің өлшемін жасап, оған 600x195 кескінді түсіреміз.

Ендеше, бұл 600x338 (16: 9 арақатынасы) кескіннің қалай көрінетінін көрейік. Бір қызығы, мен бұл суретті түсіріп, алдын ала қараған кезде, ол өте жақсы сәйкес келді - сол және оң жақ шеттері кесілген жоқ! Мен оны дәлелдеу үшін скриншот алдым, оны келесі слайдтан қараңыз.

Бірақ мен мұны браузерде (Chrome) көргенде жоғарыдағы суреттен көріп тұрғаным - оң және сол жақтары қайтадан кесілген! Бұл эксперименттен 16: 9 пропорциясына өзгерту біздің мәселелерді шеше алмайтын сияқты!

Ескерту ретінде, 16: 9 - бұл «кең экран» деп аталатын «жаңа» жалпы пропорция, ал 4: 3 - бұл ескі мектептің «толық экраны», ол теледидар күндері кең таралған. Ия, сенің мыңжылдықтар, менің айтқанымды білмейтін шығар.

2 -қадам: 16: 9 Сурет алдын ала қарау кезінде қарағандай жаңадан жүктелген

Бұл сурет - бұл біздің алдын ала қарауда 16: 9 суреті тамаша көрінетінін көрсететін экрандық сурет. Сәттілік, иә? Бұл тез емес - бұл бетті браузерден (Chrome) көргенде не болатынын көріңіз! Сол және оң жақ шеттер қайтадан кесіледі! Алдыңғы слайдқа рұқсат беру үшін өзіңізге оралыңыз.

Алынған сабақ - Алдын ала қарауға сенбеңіз! Алдын ала қарауда жақсы көрінетін нәрсе шолғышпен нақты қарау кезінде басқаша көрінеді!

Сондай -ақ, иә, менің суретімнің астында көп бос орын бар. Себебі мен 600х195 өлшемді суретті 600x338 кенепке түсіріп, оны жоғарғы жағына қойдым, сондықтан төменгі жағында бос орын бар. Бұған не істей аламыз? Жақсы … біз оны келесі слайдта шешуге тырысамыз.

Ендеше, бұл суретті қалай толық көрсетуге болатынын көруді жалғастырайық.

3 -қадам: 16: 9 L&R жақтары кесілген

Жазу үшін, қандай да бір себептермен сіздің браузеріңіз 16: 9 суреттерін тамаша көрсетсе, мен бұл туралы айтып отырмын. Міне, мен алдын ала қарап алғаннан кейін «қонғаннан» кейін көрсетілген 1 -қадамдағы 16: 9 суретін қалай көретінімді көрсететін скриншот - сол мен оң жақтың қиылғанын байқаңыз.

Егер сіз менің 1 -қадамдағы суретімді керемет түрде көрсеңіз. Маған білдір! Бірақ мен осылай көріп тұрмын. Иә, бұл титулдық беттен алынған түпнұсқадан әлдеқайда жақсы, бірақ ол әлі де үзілген. Мен үшін Instructables қызметкерлерінің кеңестеріне қарамастан, 16: 9 пропорциясы оны мүлде қысқартпайды. 4: 3 пропорциясына көшейік.

4 -қадам: 4: 3 аспектілік пропорциясын қолданып көрейік

Ендеше 4: 3 пропорциясын қолданып көрейік. Мен ені 600 пиксельді сақтаймын, 4: 3 биіктігі 450 пиксель болуы керек, сондықтан біз 600x450 кенептің өлшемін жасап, оған 600x195 кескінді түсіреміз.

Бұл 600x450 (4: 3 арақатынасы) кескіні қалай көрінеді?

Тағы да, мен оны бірінші рет енгізгенде, сурет керемет көрінеді (төменгі жағындағы ақ кеңістікті қоспағанда). Солға және Оңға жақсы көрсетіледі. Браузерде қарасақ, Оң және Сол жақ жақсы көрінуді жалғастыратын сияқты.

Бұрын айтылғандай, кескіннің астындағы бос орынның барлығы 600x195 суретті 600x450 кенепке түсіріп, оны жоғарғы жағына қойғандықтан.

Алынған сабақ - 4: 3 форматы оң және сол жақтары кесілмеуі үшін қажет сияқты. Өкінішке орай, бұл қысқа және кең суреттер үшін бос орын көп болатынын білдіреді, себебі сіз бұл суреттерді 4: 3 өлшемді кенепке тастауыңыз керек. Ия, сіз өзіңіздің кескініңізді жоғарыда және төменде бірдей ақ кеңістік болатындай етіп орналастыра аласыз, бірақ сіздің суретіңіздің үстінде немесе астында ақ бос орын көп болады, бірақ менің білуімше, бұл сізге ымыраға келу. суреттеріңіз өзгеріссіз болуы үшін нұсқаулықтарды жасау керек.

5 -қадам: 4: 3 Кескінді ортаға қоюмен

Міне, сол 600x195 кескіні 600x450 кенепке түсірілген, бірақ жоғарғы және төменгі жағында бос бос орын болуы үшін орталықтандырылған. Біршама жақсы көрінеді, мәтін суреттен алыс емес сияқты.

6 -қадам: 4: 3 Төмендегі кескінмен

Ақырында, міне, дәл сол сурет түсіп, түбіне қарай жылжыды. Енді суреттің жоғарғы жағында бос орын бар. Кескін енді тақырып жолынан шынымен бөлінген, бірақ ол мәтінге жақынырақ. Міне, бұл сіздің ымыраға келуіңіз және алған сабақтарыңыз:

• 4: 3 суреттер нұсқаулықта толық көрсетілуі үшін пайдалану керек кадрлық қатынас сияқты.
• Алдын ала қарауға сенбеңіз - бұл сіздің суретіңізді керемет көрсетуі мүмкін, бірақ нақты браузерде бөліктерді қысқартуға болады

7 -қадам: Минималды ені қандай?

Енді минималды ені қандай болуы керек екенін көрейік. Көрсетілген сурет 382x206, 2: 1 -ге жақын, шынымен де үлкен сияқты, солай емес пе? Әлбетте, Instructables кескіні ені белгілі бір өлшемге сәйкес келу үшін үлкейткен, мүмкін 640 пиксель, мен сенімді емеспін.

Бірақ ол сәйкес келеді, себебі ол «шаршы», яғни биіктігі бойынша тым кең емес. О, күте тұрыңыз, мені тағы да осы Алдын ала қарау алдап кетті! Бұл сәйкес келмейді - R&L жақтары қайтадан кесіледі.

Шындығында, бұл таңқаларлық емес, бұл алдын ала қарау ғана емес. Мен оны браузерде қарадым және алдымен ол дұрыс көрсетілді (яғни, R&L шеттері кесілмеген). Бірақ браузер арқылы қайта қарасақ, енді R&L жиектері кесілген суреттің өлшемі өзгереді. Тақ.

Сондықтан суретті кішірейтуге тырысайық. Біз кескінді 2: 1 пропорциясын сақтай отырып, 200x108 дейін кішірейтеміз.

8 -қадам: Кескінді кішірейту, бірақ пропорционалдылықты сақтау

Мен кескіннің өлшемін 2: 1 пропорциясын сақтай отырып, 200x108 етіп өзгертемін.

Енді бұл қайтадан сәйкес келеді (ажыратымдылықпен (сурет сапасы) едәуір нашарлады!), Бірақ, әрине, сіз оған қарап отырған шығарсыз және ол мүлдем сәйкес келмейді және түпнұсқадан басқа түпнұсқаға ұқсайды. жақсы ажыратымдылық. Тағы да, Instructables суретті белгілі бір енге сәйкестендіру үшін кеңейтеді, сондықтан бұл кішірек (200x108) кескін 382x206 өлшемінен әлдеқайда нашар көрінеді.

Мен «мүмкін» деймін, себебі Instructables бұл суреттерді сіздің шолғышта қалай көрсететінін білмеймін. Қандай да бір себеппен, егер мен кэшімді жаңартып, осы Нұсқаулықты қарасам, менің кескін өлшемдерім біркелкі емес сияқты, сондықтан мен Instructables не істеп жатқанын білмеймін, тек ол сәйкес келмеуі мүмкін. Нұсқаулықтың мақсаты - суреттердің мөлшерін қалай анықтау керектігін анықтау, олар кем дегенде біркелкі болады!

9 -қадам: Бейнелердің бастапқыда дұрыс көрсетілуін дәлелдеу

Міне, мен суретті жүктегеннен кейін бірден көрдім - бұл сәйкес келеді! (Instructables бүкіл скриншотты көрсету үшін жоғарыдағы скриншотты 1600x1200 кескінге (яғни 4: 3 қатынасына) сәйкестендіруім керек екенін ескеріңіз!)

Әрине, сіз бұл суретке қарап, ерлі -зайыптылардың артқа қарай жылжып кеткенін білесіз, бұл енді сәйкес келмейді. Енгізу үшін ең аз ені қандай болуы керектігін қарастырайық.

10 -қадам: 382x287 (4: 3 қатынасы)

Мен 382 енін сақтадым және 382x286 түпнұсқалық суретті 382x287 кенепке түсірдім, оны 4: 3 пропорциясына айналдыру үшін, біз Instructable 4: 3 қатынасына сәйкес келетін суретті қажет ететінін бұрын анықтадық.

Енді оның астында бос орын көп. Ол ешнәрсеге жарамайды, бірақ ол енін толтыру үшін кеңейтілді, сондықтан кескін анық емес. Нұсқаулықты ені не екенін табуға тырысайық.

11 -қадам: Кескінді жақсырақ көрсету үшін 300x206 -дан 600x206 -ға дейін кеңейту

Мен түпнұсқа 382x206 (2: 1) кескінін 600x206 (3: 1) кенепке түсірдім, оны 600 пиксельге дейін кеңейту Instructables бүкіл кескінді көрсететінін көру үшін. Тағы да, бұл бастапқыда болды, бірақ қазір көріп тұрғаныңыздай.

Бұл шынымен де таңқаларлық нәрсе - суретті алғаш рет салған кезде Instructables бұл кескіннің өлшемі мен пропорциясына қарамастан, бұл суретті дұрыс көрсететін сияқты. Бұл жолы мен тіпті Instructables жүйесінен шығып, қойындысын жауып тастадым, содан кейін бұл суреттің әлі де дұрыс көрсетілуін тексеру үшін осы «жаңасын» қайта қарадым. Әдетте бұл Instructable -ге өз жұмысын жасауға және 4: 3 пропорциясында емес кескіндердің өлшемін өзгертуге және оларды сол және оң жақтары кесілген түрде көрсетуге мүмкіндік беру үшін жеткілікті.

Бір таңқаларлығы, мен бұл нұсқаулықты «жаңадан» қайта қарағанымда, бұл сурет толықтай көрсетілді, бірақ, өкінішке орай, мен басқа бірдеңе істеу үшін кетіп, шамамен бір сағаттан кейін келгеннен кейін, бұл сурет көрсетіле бастады. L&R жақтарымен кеңейтілген, жоғарыда көріп тұрғандай.

Бұл не үшін немесе қалай болады? Менде ешқандай түсінік жоқ. Мен суретті жүктегеннен кейін біраз уақыт күту Instructables -ті басқаша көрсетуге мәжбүр ететінін түсінбеймін, бірақ ол солай етеді. Дәлел ретінде мен келесі слайдқа жүктегеннен кейін 10-15 минуттан кейін жоғарыда көрсетілген суреттің экрандағы түсірілімін жақсы көрсетемін.

12 -қадам: Жүктелгеннен кейін суреттер бастапқыда дұрыс көрсетілетінін дәлелдеу

Міне, 600x206 кескіні жүктелгеннен кейін бірден көрсетіледі. Бұл алдыңғы слайдтың экрандық суреті. Алдыңғы слайдқа оралыңыз және сіз қазір суреттің қаншалықты жақсы екенін көре аласыз!

Менің экрандық түсіруімнің өлшемі 1563x766 болатынын ескеріңіз, бірақ мен осы нұсқаулықтың басында өз тәжірибемнен білгенімдей, бұл 4: 3 пропорциясына сәйкес келмейтінін білдім (1563x766 шамамен 4: 2), егер мен жаңа ғана скриншот жүктелді Instructable жиектерін кесіп тастайды. Мен бұл суретті 4: 3 кенепке түсірдім, сондықтан менің скриншотымның астында бос орын көп.

Назар аударыңыз, скриншот 11 -қадамның атауын өзгертпес бұрын және сіз бұл туралы ойланып қалсаңыз, осы мәтіннің барлығын теруді аяқтамас бұрын түсірілген!

Сабақ - жүктелген суретті браузерде жүктегеннен кейін бірден қарау, ол болашақта қалай көрсетілетінін көрсетпейді. Қандай да бір себеппен, кез келген өлшемдегі және/немесе пропорциялы сурет жүктелгеннен кейін бірден, тіпті жүктеуден кейін шамамен 10-15 минут ішінде, тіпті Instructables бағдарламасынан шыққаннан кейін де, оны жаңа шолғыш сеансынан жаңадан көргенде де жақсы көрінеді..

Бірақ шамамен бір сағат күтіңіз, сонда бәрі өзгереді! Егер сіздің суретіңіз 4: 3 пропорциясына сәйкес келмесе, Instructable көмегімен реттеледі (әдетте үлкейтіледі), сондықтан жиектер кесіледі.

13 -қадам: Қорытынды - Мен білгенім

Қорытынды: мен не үйрендім?

1. Кескінді толық көрсету үшін 4: 3 арақатынасын (ені: биіктігі) сақтау міндетті!

2. Ең үлкен ажыратымдылығы бар түпнұсқа суреттерді қолданыңыз және оларды 4: 3 қатынасындағы кенепке салыңыз. Егер тым үлкен болса, Instructables оны кішірейтеді және сізде жақсы айқын кескіндер болады.

3. Егер сіздің суретіңіз тым кішкентай болса (ені 600 пиксельден әлдеқайда аз) Instructable сіздің кескініңізді кеңейтеді және оны кем дегенде 600 пиксельге ендіреді, осылайша оны анық емес етеді. Мен «ish» деймін, себебі мен Instructable қандай енін қолданатынын нақты білмеймін, бірақ ол 600 -ге жақын сияқты. Бұл 640 болуы мүмкін, бұл ескі мектеп трубкасының мониторы кезінде кең таралған.

600x450 және 640x480 - 4: 3 пропорциясы. Ескі мектептің «толық экранды» түтік мониторлары 640x480 (ені x биіктігі) болды.

4. Егер түпнұсқа кескіннің ені кемінде 600 пиксель болмаса не істеу керек? Сіз жасай алатын барлық нәрсе - бұл сіздің суретті бастапқы өлшеміне жақын көрсететін 4: 3 қатынасына сәйкес келетін кенепке түсіру. Егер сіздің бастапқы суретіңіз кішкентай болса, онда бос орын көп болады, сондықтан кескінді ортаға қоюға тырысыңыз немесе бос орынды кескіннің үстіне немесе астына қойып, оны мүмкіндігінше жақсы етіп көрсетіңіз.

Менің білуімше, бұл сіздің нұсқауларыңызда сіздің ымыраға келуіңіз керек, осылайша сіздің суреттеріңіз өзгеріссіз болады.

Мысал ретінде, жоғарыдағы сурет 600x450 кенептің өлшемі, оған 382x206 кескін түсірілген және оның ортасында орналасқан, сондықтан бізде жоғарыда және төменде бос бос орын бар. Кескін шамамен өзінің бастапқы өлшемінде көрінеді, менің ойымша, Instructables оны 640x480 -ге дейін кеңейтуі мүмкін (шамалы кеңейту), сондықтан біз бұл түпнұсқалық суретті жасай аламыз.

5. Алдын ала қарауға сенбеңіз немесе нұсқаулыққа жүктегеннен кейін сіздің суретіңіз алғашқы бірнеше сағат ішінде қалай көрінетініне сенбеңіз! Қандай да бір себептермен, сіз жүктегеннен кейін бірнеше сағат өткенге дейін сурет өлшемдері біркелкі болмайды.

Әр кезде, сіз суретті алғаш рет салған кезде, Instructables бұл кескіннің өлшеміне немесе пропорциясына қарамастан, оны дұрыс көрсететін сияқты. Ол біраз уақыттан кейін де дұрыс көрсетіле беруі мүмкін, бірақ ЕСКЕРТПЕҢІЗ, себебі ол 4: 3 ережесін сақтамайынша, олардың өлшемін өзгертеді және сізге қиындықтар туғызады!

Бұл көмектеседі деп үміттенемін, егер сіз жақсы жолды тапсаңыз немесе басқа кеңестер болса, маған хабарлаңыз!