Новости Joomla

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 15 Ответов
  • 5335 Просмотров
*

zxvorobey

  • Захожу иногда
  • 81
  • 2 / 0
Как нарезать картинку на шаблон?
« : 14.02.2018, 20:13:03 »
Друзья, лет 5-6 назад когда начал увлекаться жумлой видел урок по созданию шаблона из картинки, и там в какой то фотошопоподобной программе можно было разлиновать картинку и получить на выходе разрезанные картинки и HTML файл с разлиновкой. Объясняю туго, но надеюсь найдется человек который поймет и напомнит название программы.
Записан
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Как нарезать картинку на шаблон?
« Ответ #1 : 14.02.2018, 20:18:05 »
берете фотошоподобный фотошоп и инструментом slice режете на прямоугольники, сохраняя результат для web с 60-70 качеством в джипег.
а дальше РУЧКАМИ в notepad++ делаете каркас из дивов и в нем собираете.
ибо то, что вам программа сгенерирует вы потом заколебетесь понимать и подстраивать.
Записан
*

beliyadm

  • Moderator
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Как нарезать картинку на шаблон?
« Ответ #2 : 14.02.2018, 23:00:15 »
effrit этот вариант прокатывает для нубов и очень простых макетов, ибо потом эти слайсы ты затрахаешься собирать и не приведи аллах изменять.
Вариант "нарезать из psd картинки и свертать" ушел в прошлое лет 12-15 назад.
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Как нарезать картинку на шаблон?
« Ответ #3 : 14.02.2018, 23:32:29 »
да никуда он не ушел.
работаешь же с готовыми врейморками обычно, так что проще собрать из базовых дивов и прописать нужные классы, чем выскребать из всяких генераторов их код корявый.
к тому же, для нубов - самое оно, для понимания азов.
Записан
*

beliyadm

  • Moderator
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Как нарезать картинку на шаблон?
« Ответ #4 : 14.02.2018, 23:35:09 »
effrit мы может говорим о разных вещах?
Я из ПСД шаблона беру сетку, размеры элементов, цвета и прочую ерундень.
Но никогда уже давно не решу псд шаблон на картинки через слайсы (каюсь, был период с год когда мне это нравилось, потом поумнел)
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Как нарезать картинку на шаблон?
« Ответ #5 : 14.02.2018, 23:40:43 »
так слайсы - чисто для графики. размечаешь, как надо и разом выгружаешь все картинки порезанные, если там никаких сложных изысков нет.
а все остальное - в блокноте. верстку я из фотошопа никогда не брал - чур меня  ;D
слайсы удобны, если вносишь изменения в картинки. типа, у тебя размеры уже заданы, так что при правке выгрузятся 1 в 1.
но хозяин - барин. не в курсе, как тебе удобнее верстать. я тоже не профи, раз в год заморачиваюсь обычно.
« Последнее редактирование: 14.02.2018, 23:44:00 от effrit »
Записан
*

beliyadm

  • Moderator
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Как нарезать картинку на шаблон?
« Ответ #6 : 14.02.2018, 23:48:52 »
effrit и когда тебе слайсы требовались при реальной верстке? Я вот их тестил в 2006 году и забыл как страшный сон. Зачем они вообще нужны, когда мы верстаем уголки и шадоу через именно стили а не нарезку картинок.
Устаревшая давно уже опция
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Как нарезать картинку на шаблон?
« Ответ #7 : 14.02.2018, 23:51:51 »
да что они тебе сделали такого?  ;D
ну вот верстал магазинчик, а мне в процессе правки присылали.
так тупо вставляешь правки слоем в документ, сохраняешь для веба и усе - готова исправленная графика.
при чем тут шадоу - я не понял.
Записан
*

zxvorobey

  • Захожу иногда
  • 81
  • 2 / 0
Re: Как нарезать картинку на шаблон?
« Ответ #8 : 15.02.2018, 01:39:46 »
У меня тут проблема следующая. Есть картинка дерева с яблоками. Нужно что бы при нажатии на яблоки происходил переход по определенной ссылке, в зависимости от яблока по которому кликаешь. Если есть у кого соображения, поделитесь пожалуйста.
Записан
*

Театрал

  • Захожу иногда
  • 232
  • 7 / 0
Re: Как нарезать картинку на шаблон?
« Ответ #9 : 15.02.2018, 04:31:12 »
Цитата: zxvorobey от 15.02.2018, 01:39:46
Если есть у кого соображения, поделитесь пожалуйста
Блок с фиксированной шириной высотой. Картинку фоном. Внутри блока ссылки с абсолютным позицианированием и заданной шириной-высотой.
Не?

))) Если яблоки отдельными слоями, можно и их туда засунуть и сделать, чтоб подпрыгивали при наведении... или, например крутились... Ну это уже так.
« Последнее редактирование: 15.02.2018, 04:34:31 от Театрал »
Записан
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Как нарезать картинку на шаблон?
« Ответ #10 : 15.02.2018, 07:24:55 »
Записан
*

zxvorobey

  • Захожу иногда
  • 81
  • 2 / 0
Re: Как нарезать картинку на шаблон?
« Ответ #11 : 15.02.2018, 13:50:57 »
Цитата: effrit от 15.02.2018, 07:24:55
http://htmlbook.ru/html/map
Похоже на то что нужно, я даже и не знал о таких возможностях. Спасибо вам огромное. Вечером попробую и предоставлю результат.
Записан
*

Театрал

  • Захожу иногда
  • 232
  • 7 / 0
Re: Как нарезать картинку на шаблон?
« Ответ #12 : 16.02.2018, 06:09:43 »
Цитата: effrit от 15.02.2018, 07:24:55
http://htmlbook.ru/html/map

Лет 5 назад на такой карте тоже пытался сделать дерево, только генеалогическое. ) Заколебался и забросил...

А чем это лучше чем ссылка с position: absolute? Только, что формы разные можно задавать, так яблоки круглые...
Записан
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Как нарезать картинку на шаблон?
« Ответ #13 : 16.02.2018, 07:49:39 »
Цитата: Театрал от 16.02.2018, 06:09:43
А чем это лучше
Да особо ничем. Просто - готовый инструмент.
А если хочется чего-то по-круче, то рисуем в векторном редакторе что-нить сложное (типа бесплатного Inkscape), выгружаем в svg и делаем всяческий интерактив.
https://www.sitepoint.com/dynamic-geo-maps-svg-jquery/
дальше уже можно докручивать - я сделал поднятие при наведении и вывод фото вместе с инфой, если есть данные по нему. так что все зависит от задачи и желания заморочиться  ;)
Записан
*

zxvorobey

  • Захожу иногда
  • 81
  • 2 / 0
Re: Как нарезать картинку на шаблон?
« Ответ #14 : 20.02.2018, 02:23:03 »
Еще раз спасибо за помощь. Решил вопрос через тег map

вот пример http://dou8.lmn.su/groups.html

вот код:
Код
<p><img src="images/derevo600.png" alt="" usemap="#derevo600" width="600" height="550" border="0" /></p>
<p><map name="derevo600"> 
<area alt="Группа 1" coords="335,192,25" shape="circle" href="menyugruppa1.html" title="Группа 1" />
 
<area alt="Группа 2" coords="256,261,25" shape="circle" href="menyugruppa2.html" title="Группа 2" />
 
<area alt="Группа 3" coords="268,192,25" shape="circle" href="menyugruppa3.html" title="Группа 3" />
 
<area alt="Группа 4" coords="162,308,25" shape="circle" href="menyugruppa4.html" title="Группа 4" />
 
<area alt="Группа 5" coords="397,245,25" shape="circle" href="menyugruppa5.html" title="Группа 5" />
 
<area alt="Группа 6" coords="341,282,25" shape="circle" href="menyugruppa6.html" title="Группа 6" />
 
<area alt="Группа 7" coords="407,308,25" shape="circle" href="menyugruppa7.html" title="Группа 7" />
 
<area alt="Группа 8" coords="196,231,25" shape="circle" href="menyugruppa8.html" title="Группа 8" />
 </map></p>
Записан
*

Театрал

  • Захожу иногда
  • 232
  • 7 / 0
Re: Как нарезать картинку на шаблон?
« Ответ #15 : 20.02.2018, 05:55:56 »
Цитата: zxvorobey от 20.02.2018, 02:23:03
вот пример http://dou8.lmn.su/groups.html
Симпатично получилось! 
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Шаблон из ПСД

Автор hedindoom

 Ответов: 17
Просмотров: 6800 		Последний ответ 17.02.2020, 14:57:19
от beliyadm