Инструмент за нарязване (Slice tool)

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
Назад Алтернативен видео плеър
¿ Напред
Нека да разгледаме, как работи инструмента за нарязване на един файл.
И експортирането му на много различни части.
Ще направя един файл 800 по 600 пиксела.
Инструментът за нарязване се намира тук под "crop tool".
И с "drag" просто изрязвам една част, като тази част тук оградината ще излезе накрая като една картинка.
Както виждате, другите части са автоматични слайсове.
И те също ще бъдат нарязани автоматично програмата.
Мога да сложа още мои слайсове.
Или например с десен бутон "done divide slice" на 10 хоризонтални части.
В този слайс мога да дам връзка, в "edit slice options" или да му кажа да се зареди в нов прозорец.
Нека да сложим нещо на фонът все пак.
Сега ще дам "save for web and devices".
В този прозорец мога да избера всеки от слайдовете, с каква компресия ще бъде.
Като тук ще ми покаже оригиналът и компресията, която съм избрал.
Например избирам "low" тук.
Ще избера възможно най-некачествената, за да видите разликата.
Или "gif" например в два цвята.
Това е оригиналът, а това е слайсът с компресията, която сме избрали.
Ще селектирам всички.
И ще им дам "jpeg", "high".
Te станаха общо 315k.
Може би по-малко може да дам в случаят.
Когато натисна "save" в този екран трябва да изберем "settings other".
И от тук "slices".
По подразбиране ще е така, "generate table".
Трябва да натиснете тук, "generate css".
Да генерира "css".
Tова е по-новият и по-качествен начин, таблиците не са хубави и бавно зарежда страниците.
Натискам OK.
Трябва да сте сигурни, че тук е селектирано "html and images", и "all slices".
Кликвам на "save".
Сега, това е папката, която ми е генерирало.
Натискам, за да видя страницата.
Тук, докато селектирам с "drag" и мишката може да видите набързо, какви са слайсовете.
Както и тук.
Виждате части от нашият голям файл са разрязани на малки файлчета.
И когато натисна тук, виждате мишката се показва като пойнтер.
Когато натисна в нова страница ще ми заради "Yahoo".
Това беше урокът за слайсове.

Тест за преминаване към следващия урок

 
За какво служи 'Slice' инструмента ?
Помага ни да разрежем един файл на малки парчета или да създадем уеб страница с добре оптимизирани картинки
Същия е като 'Crop', но има малко повече опции
Помага ни да слепим няколко файла в един, така че да можем да ги обработваме на едно място. Първо задържаме SHIFT и маркираме правоъглниците.
 
Кое е най-вярно от следните формати?
PNG е най-добър когато искаме прозрачност. GIF - когато имаме малко цветове и нямаме преливки. JPG - когато имаме снимка или изображение с преливки и много цветове.
JPG е добър за изображения с малко цветове без преливки. PNG и GIF са добри при много цветове
GIF е добър за снимки с много цветове. PNG когато нямаме прозрачност и имаме много цветове. JPG може да има прозрачност, дава най-добро качество когато няма преливки, това е TIF с добра компресия.

Въпроси и отговори

  • Уеб страница

    инж. Юлия Петрова Савова:

    Здравейте, Защо не ми се показва моята уеб страница с картинката, а друга страница - Ask.com ?

    Ангел Арънски:

    Най-вероятно имаш някакъв toolbar в броузъра който се опитва да те вкара в страници с реклами и платени търсения. Те са настроени да се появяват при различни грешки на броузъра.

  • Петко Палов:

    Браво.

    Севгюл Шаибова:

    Здравейте, от къде отваряте папката, където се генерира уеб страницата

  • Защо адреса на страниците ми изглежда странно?

    Никола Григоров:

    На мен не ми го зарежда като страница, ами го търси като файл на хард диска, защо ?

    Ангел Арънски:

    Страниците на компютъра ни имат адреси подобни на " file://documents/folder/page.html ", а пък тези качени на хостинг сървър със закупен домейн " https://www.domainname.com/folder/page.html "

  • Как да отворя изрязаните снимки в папка images?

    Петя Георгиева                             :

    Здравейте, всичко в урока изпълних безпроблемно, но имам друг проблем, надявам се да можете да ми отговорите.

    Когато вляза в папка images и натисна някоя изрязана картинка/снимка за да я видя, ми се отваря в internet explorer, а не през програмата за гледане на снимки. Може ли да ми кажете откъде може да идва този проблем? Също така файла webpage е без картинка/иконка. По принцип използвам за браузър Chrome. Може би проблема е в някой от браузърите...
    Гергана Игнатова:

    Натисни десен бутон на мишката върху картинката. След това "Open with" и накрая избираш програмата с която искаш да я отвориш. Ако искаш да избереш програма по подразбиране(така че да се отваря с първия бутон на мишката), то има един бутон отдолу "Choose default program"

    Петя Георгиева                             :

    Благодаря, бях забравила тази опция :)

  • Какво да напишем в полето Target: .... , за да ни излезне на Нов Таб?

    Стефка:

    Какво да напишем в полето Target: .... , за да ни излезне на Нов Таб или в същия Таб?

    Ангел Арънски:

    Ако искаш нов таб всеки път 

    target="_blank"
    Ако го редактираме във Photoshop, то сложи само _blank

  • Какво точно натискате след като се съхрани (save), за да Ви излезе папката с файла - не мога да разбера?

    Ма:

    Във видеото след като се запамети файла изведнъж изкача папката в която е съхранен .html файла - как става с клавишна комбинация ли?

    Мария Балева:
    Здравей,
    ти избираш къде да запаметиш файла и може предварително да си отвориш директорията, като я минимизираш и след това просто с един клик върху нея се отваря и вътре вече ще е запаметения файл.
    Другия вариант е да превключваш между отворентие папки,страници и програми с клавишна комбивация
    ALT +Tab
  • Може ли да зададем форма на изрезките?

    Георги Иванов:

    Привет!
    Има ли някакъв начин да се задава по-специфична форма на изрезките? Например да речем, искате дървото да е изрязано в парче, което да има форма, максимално близка до формата на дървото. Ако може - Как?

    Веселин Аула:

    Здравей, растерните изображения винаги се поместват във файл с правоъгълен размер. Реално може да изглежда с формата на дърво, но пак ще е правоъгълник, просто ще има прозрачни празни пиксели. Тоест няма как крайното растерно изображение да е в каквато и да е друга форма освен правоъгълник. 

    Но ако говорим само за изрязването и след това експортирането от Photoshop, то можеш да използваш File / Scripts/ Export Layers To Files
    Избираш слоевете и след това активираш скрипта, избираш PNG и директория. Накрая ще имаш слоевете изрязани с минималния им размер.
    Ако искаш да имаш по-сложни графики от много слоеве които да излизат като една картинка, то ги вкарай в smart object.
  • Какво означават някои опции при запазване на PNG файлове?

    Росица Хаджийска:

    Здравейте. Разгледах менютата при различните компресии и като гледам при прозрачните PNG файлове са най-много - какво означават тези drop-downs, които съм оградила на скрийншота, и как се променя изображението спрямо избраната от нас настройка? 

    Освен това, винаги ли slices ще бъдат правоъгълни, т.е. ако имам например нещо триъгълно на картинката, може ли изрезката да е и тя триъгълна, така че мишката да активира хиперлинка само когато е вътре в този триъгълник, а не в правоъгълника, който по подразбиране го огражда?

    Ангел Арънски:

    Това са различни алгоритми с които се редуцират цветовете в PNG-8. Можеш да избереш Colors:16 и да видиш по-голяма разлика. Най-добре е да използваш PNG-24 тогава няма редуциране на цветовете. Файла става по-голям, но не би трябвало да има значение. PNG-8 можеш да ползваш при специални случаи, ако например сайта ти ще използва прекалено много снимки и трябва да са по-оптимизирани.

    Росица Хаджийска:

    Благодаря много. А относно другата част от въпроса ми, може ли да кажете дали има изобщо начин да слайсваме нещо с друга форма освен правоъгълна, т.е. на сайта ни, хиперлинкът да се активира тогава когато сме вътре във формата (било то триъгълна, кръгла и т.н.) а не да хваща правоъгълникът, който по подразбиране огражда формата ни? Не че съм срещала нещо подобно досега :D

    Ангел Арънски:

    Може, но няма да е вътре във Photoshop. Можеш да използваш image map. Тук може да създадеш такъв: imagemap-generator.dariodomi.de/

    Тази технология не се използва често, даже почти никога :)
    Последно съм я виждал в https://www.milliondollarhomepage.com/
    Там са използвали една картинка и с image map са поставяли връзки по нея. Самите връзки могат да са с всякаква форма.
    Росица Хаджийска:

    Да, познат ми е image map-a в html, и аз имах впечатления за него, че не се използва много-много. Но ми беше любопитно дали PS предлага подобен ефект :) Благодаря!


  • Как да изберем правилния размер на файл?

    Iva:

    Направих файл 1024 на 800 пиксела, записах го Save for Web, но когато отворя html-a излиза огромен, чак когато намаля мащаба на 25% се вижда нормален? Проблемът е в размера на файла или в Chrome, чийто мащаб по подразбиране е 100%?


    Антон Иванов:

    Иве, според мен трябва да публикуваш и сорса на html-файла, да не би в него да е зададено колко голямо да бъде показвано изображението, без значение колко е голямо. Зависи също и от резолюцията на екрана, но не вярвам да е толкова малка. Провери и мерните единици - да не би да е милиметри или друго вместо пиксели. Най-добре си отвори самото изображение (jpg или в какъвто формат си го записала, а не html-файла) - там /Image/Image Size...

    Антон Иванов:

    /Image/Image Size... е за Photoshop, ако се отвори с друга програма ще е по друг начин.

    Iva:

    Много много благодаря! Заради размера на картинката е било - Original size 4288px x3216px! след като го промених на 1024 x 768 всичко си дойде на мястото :)

  • Ангел Арънски:

    Ако съм разбрал павилно - При запис можеш от падащото меню да избереш дали искаш само html, само картинки или и двете. Трябват ти и двете, за да създаде папка images и да ги сложи вътре.

  • Как можем да споделим html файла с други хора?

    Cvety:

    Здравейте :)

    С такова обяснение няма как да не се получи, но бих искала да знам има ли начин запазеният html файл да бъде изпратен така, че и друг човек, който няма достъп до моя компютър, да може да го отвори в браузер или по друг начин, така че да го вижда като картинка? Тъй като html файлът сега се отваря започвайки с file:///C:/Users/..., по този начин няма как да стане освен на моя компютър, където иначе си изглежда прекрасно и всичките му 7-8 връзки работят :)

    Предварително благодаря!

    Поздрави!

    Димитрина Петрова:

    Можеш да използваш този сайт https://codepen.io/ Представлява игрална площадка в която можеш да пишеш html, css и javascript. Така можеш да изпращаш това, което си направила на други хора и също така да си тренираш редовно знанията, без да се налага да пазиш излишна информация в компютъра си.