Помогите чайнику справиться с шаблоном дизайна в Corel...

S

Slaider

Member
Joined
Jun 22, 2004
Messages
12
Reaction score
0
Age
40
Я немного чайник в том как работать с дизайном нарисованном в Photoshop или Corel... Сам дизайн уже сделал, а вот порезать все правильно как-то не получается.... Не мог кто нибудь написать инструкцию (подроную) или дать ссылку на это???
Буду очень благодарен....
 
R

RaftKorn

Member
Joined
Feb 5, 2006
Messages
660
Reaction score
763
Age
38
Location
Киевская Русь!
Ты более конкретно скажи что тебе надо.
На сколько я понял, у тебя есть готовая картинка, и ты не знаешь как ее разрезать на части??? Так чтоли?
Если так, то берешь открываешь ее, например, в IrfanView, выделяешь нужную часть (вверху будет показываться точное количество выделеных пикселей). Потом правка - вырезать выделеную область (или обрезать выделеную область). И сохраяешься.
Или в фотошопе есть инструмент для выделения, называеться "кадрирование" (левое меню - третий с верху в левом столбике).
А если же у тебя это все порезано, и ты не знаешь как это натянуть на сайт, то это уже другой вопрос.
Напиши, что конретно ты не можешь сделать.
 
S

Slaider

Member
Joined
Jun 22, 2004
Messages
12
Reaction score
0
Age
40
пишу конкретно :)
Я нарисовал дизайн сайта в Corel. Как перетащить в Photoshop знаю, инструмент для порезки "кадрирование" тоже знаю,
просто есть такие нюансы... кнопки в этом дизайне графические, и они изменяют цвет при наведении на них.. так мне что тогда теперь в фотошопе все это выделять и менять каждой кнопке цвет, а потом резать и так с каждой кнопкой возиться???.. И еще один вопрос - после того как все это порежу... Воплотить в жизнь так сказать.... вот в приницпе описал, если что спрашивай - обьясню подробнее...
 
R

RaftKorn

Member
Joined
Feb 5, 2006
Messages
660
Reaction score
763
Age
38
Location
Киевская Русь!
Весь твой дизайн должен состоять из множества маленьких картинок, которые потом, когда их собереш в кучу посредством html (css, php...) датут цельную картину. :)

меню:
для того чтобы картнинки (или просто цвет) в меню менялись, тебе надо иметь иметь два изображения:
1) которое будет постоянно отображаться
2) которое будет отображаться при наведении курсором
И потом уже в html (php...) тебе надо вписать скрипт, который будет менять эти картинки при наведении.

Вот несколько скриптов:
1)[HIDE="0"]Первое, что нужно сделать, задействовать основной скрипт. Его мы поместим между тегами <head> и </head>. Выглядит скрипт так:
<SCRIPT>
<!--
if (document.images) {
image1on = new Image();
image1on.src = "swap_pic1.gif";
image1off = new Image();
image1off.src = "swap_pic.gif";

}

function turnOn(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "on.src");
}
}

function turnOff(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "off.src");
}
}
-->
</SCRIPT>
Используемые обозначения:
swap_pic.gif - Картинка, которая будет отображаться первоначально
swap_pic1.gif - Картинка, которая загорится после подведения мыши

Основное уже сделано. Теперь браузер знает и обычную картинку и "активную". Осталось только указать ему, где вставлять картинку. Выбирайте место, где требуется эта картинка и на ее месте прописываете следующее:

<a href="HTTP://MWEB.RU" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')"> <img name="image1" src="swap_pic.gif" alt="Пример активной картинки" width="100" height="50" border="0"></a>
Парамытры alt, width и height меняйте в зависимости от конкретной ситуации.[/HIDE]

2)[HIDE="0"]<p>
<img border="0" id="img1" src="адрес_файла"
height="20" width="100" alt="Текст кнопки"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'адрес_файла)"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'адрес_файла)"
fp-style="fp-btn: Jewel 1" fp-title="Текст кнопки"></p>

onmouseover - картинка при наведении курсора,
onmousedown - картинка при нажатии на нее,
src - картинка в нормально состоянии.[/HIDE]

А еще лучше, если знаешь css, тогда и скриптов не надо.

А вооплощать в жизнь придеться псредством html.
Если ты мало в нем разбираешься, тогда используй какой-нибудь графический html редактор, мне в этом плане нравиться фронт-пейдж.

Я ответил на твои вопросы, которые смог увидеть в твоем предыдущем посте, если ты хочешь конкретные ответы, задавай конкретные вопросы, а то я не могу понять что именно тебе надо :)!
 
M

Mirabo

Member
Joined
Aug 9, 2004
Messages
336
Reaction score
113
Age
56
Добавлю от себя, что подобное (т.е. резать картинку и делать кнопки, которые изменяют цвет при наведении на них) удобнее делать не в Photoshop, а в ImageReady - программе, которая специально для этих целей и предназначена.

Из Photoshop-а открой свое изображение в ImageReady - на панели инструментов есть специальная кнопка, заранее продумай таблицу по которой станешь резать изображение, реши какие куски у тебя будут как фон, какие куски будут не фоновыми, какие будут как JPG, какие как GIF файлы - для того чтобы было удобнее оптимизировать, какие куски ты будешь объединять вместе, какие, наоборот, дополнительно разрезать, места, где изображение буде и вовсе отсутствовать... ну, и т.д. - там есть специальная вкладка Slice для этих целей. Когда порежешь все грамотно, сохраняешь, но не просто, а Save Optimazed As... Там целая куча настроек - сам разберешься, главное - определись, как будешь сохраняться - HTML или CSS. Фактически, после сохранения, будет создана страница твоего сайта. Т.е. код с таблицей (если HTML). При этом, картинки будут сохранены в отдельной папке. Код поправишь в редакторе HTML. Там же исправишь растяжение таблиц, фоны и проч. Главное, в ImageReady как раз есть специальные функции, чтобы создавать анимированные кнопки, переключатели и др.
Успехов!
 
Last edited by a moderator:
R

RaftKorn

Member
Joined
Feb 5, 2006
Messages
660
Reaction score
763
Age
38
Location
Киевская Русь!
Mirabo said:
Добавлю от себя, что подобное (т.е. резать картинку и делать кнопки, которые изменяют цвет при наведении на них) удобнее делать не в Photoshop, а в ImageReady - программе, которая специально для этих целей и предназначена...
Click to expand...

Вот чудненько пояснил :). А я просто вообще дизайн частично делаю, и клею сразу в html, мне так проще, сразу вижу картинку, и сразу работаю с кодом.
 
M

Mirabo

Member
Joined
Aug 9, 2004
Messages
336
Reaction score
113
Age
56
@RaftKorn
Пока не познакомился с ImageReady тоже так же делал, а потом, когда разобрался, только такой связкой и работаю: рисую макет в Photoshop, перевожу в ImageReady, все режу на лоскутки (slice), сохраняюв HTML и окончательно довожу в Dreamweaver
 
V

viper

Member
Joined
Mar 16, 2004
Messages
570
Reaction score
201
Age
26
Вот несколько скриптов:
1)
Click to expand...

зачем же так сложно ? :) На CSS:
класс menu
a.menu:link {
background: url(путь_к_картинке) no-repeat;
padding: 5px 0 0 5px; /*отступ для текста ссылки*/
}
a.menu:hover {
background-position: 0px -25px; /*-25px высота на коорую будет смещатся фон ссылки*/
}

теперь просто рисуеш кнопку высотой 50px. делиш её на пополам. в первой половинке рисуеш что-то для обычной ссылки, а во второй половинке рисуеш то что будет при наведенной на ссылку мышке.

А поповоду шабов. Имхо удобнее в Photoshop такое делать. Тем более тебе верно выше посоветовали про слайсы.
 
D

doberman.28

New member
Joined
May 5, 2007
Messages
4
Reaction score
0
Location
Ukraine/West
Только зачем картинку из Корела в Фотошоп кидать? Корел отлично сам нарезает... Я всегда режу в нем...
 
You must log in or register to reply here.
Top