Как новичку создать дизайн сайта?

LeoMilan

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

Но дизайн нам никогда не преподавали, всё что умею, все научился в инете.

Подскажите как к примеру делать более менее нормальные логотипы, не имея опыта в дизайнте (не предлогать сервисы по соданию логотип, это не то) и как сделать такую вещь к примеру.

Вот сайт http://promodern.ee/

, там где размещен контент, там есть изгиб в верхнем левом углу, как например такое сделать подскажите. Может вообще линк дадите, где всякие такие темки для сайтов рассказывают как делать. Вы дизайнеры всяко что-то полезное можете подсказать.

lukamal

LeoMilan:
Вот сайт http://promodern.ee/

, там где размещен контент, там есть изгиб в верхнем левом углу, как например такое сделать подскажите. Может вообще линк дадите, где всякие такие темки для сайтов рассказывают как делать. Вы дизайнеры всяко что-то полезное можете подсказать.

Если вас заинтересовал дизайн вы можете изучить структуру страницы сами. В Firefox например это делается вот так

Вы увидите код всей страницы.

<html>
<head>
<title>Promodern OÜ</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<META NAME="DESCRIPTION" CONTENT="Atelje">
<META NAME="KEYWORDS" CONTENT="ateljee,moda,promodern,avatud ateljee,kunst,tellimine">
<META NAME="RESOURCE-TYPE" CONTENT="DOCUMENT">
<META NAME="Document-state" CONTENT="Dynamic">
<META NAME="revizit-after" CONTENT="1 day">
<META NAME="URL" CONTENT="http://www.promodern.ee

">
<META NAME="AUTHOR" CONTENT="Maxim Zimarev">
<style>
.key_on { border-top: 1 solid #202020; }
</style>
</head>
<body bgcolor="#eedca2" marginheight="0" marginwidth="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<form method="POST" target="_self" id="mainForm">
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" align="center" background="images/background.gif">
<tr>
<td width="230" height="100" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td width="230" ><img src="images/logo.gif" width="230" height="100" alt="" border="0" /></td></tr>
<tr><td align="right" valign="top" height="110">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="rus/images/k_about.gif" width="217" height="19" alt="" border="0" /></td></tr>
<tr><td style="padding: 3 0 0 0"><img src="rus/images/k_studio.gif" width="217" height="19" alt="" border="0" style="cursor: pointer" onClick="lnk2.value='';lnk.value='studio';mainForm.submit();"/></td></tr>

<tr><td style="padding: 3 0 0 0"><img src="rus/images/k_job.gif" width="217" height="19" alt="" border="0" style="cursor: pointer" onClick="lnk2.value='';lnk.value='job';mainForm.submit();" /></td></tr> <tr><td style="padding: 3 0 0 0"><img src="rus/images/k_contact.gif" width="217" height="19" alt="" border="0" style="cursor: pointer" onClick="lnk2.value='';lnk.value='contact';mainForm.submit();"/></td></tr></td></tr>
</table>
<tr><td align="right"><table border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top" height="75" valign="top">
<table border="0" cellpadding="5" cellspacing="0">
<tr><td><img src="rus/images/flag.gif" width="30" height="19" alt="" border="0" /></td></tr>
<tr><td><img src="est/images/flag.gif" width="30" height="19" alt="" border="0" style="cursor: pointer" onClick="lng.value='est';mainForm.submit();" /></td></tr>
<tr><td><img src="eng/images/flag.gif" width="30" height="19" alt="" border="0" style="cursor: pointer" onClick="lng.value='eng';mainForm.submit();" /></td></tr>
</table>
</td>
<td height="415"><img src="images/logo2.gif" width="180" height="415" alt="" border="0" /></td>
</tr>
</table>
</td></tr>
</table>
</td>
<td width="550" height="570" valign="top"/>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td width="550" height="570" valign="top" background="images/book.gif" style="padding: 35 25 5 30"/>

<table border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" width="265" style="padding: 0 10 0 0; text-align: justify; font-size: 14px;"><img src="rus/images/firma.gif" width="231" height="18" alt="" border="0"/><br><img src="images/underline.gif" width="231" height="14" alt="" /><br><font color="575757" style="tahoma">OÜ Promodern было основано весной 2003 года как семейное предприятие.

Сейчас в фирме работает более 20 человек.<br><br>
В 2005 году фирма заняла первое место в устроенном департаментом предпрнимательства конкурсе "Sarav startija".
Благодаря помощи мэрии Таллинна, удалось существенно расширить и обновить парк машин. <br><br>
Основным видом деятельности является выполнение различных субподрядных работ. С 2007 года фирма выполняет также
индивидуальные заказы. <br><br>
Мы стремится идти в ногу со временем и быстро меняющимися потребностями рынка и вкусами наших клиентов,
постоянно внедряя в производство новые технологии и собственные KNOW-HOW! Огромное внимание уделяется качеству продукции.

</font><br><br><div style="cursor: pointer;font-size: 15px;text-decoration:underline;color: #0000FF;" onClick="lnk2.value='equipment';mainForm.submit();">наше оборудование</div></td><td width="214" valign="top"><div style="padding: 15 8 15 8;border: 1px solid #808080;background-color: #DDDDDD" ><table border="0" cellpadding="0" cellspacing="0" style="cursor: pointer;" onClick="lnk2.value='equipment';mainForm.submit();"><tr><td><img src="images/equipment_main.gif" width="214" height="343" alt="" / border="0" title="наше оборудование"></td></tr></table></div></td></tr></table> </td></tr>
<tr><td> </td></tr>
</table>
</td>
</tr>
</table>
<input type="Hidden" id="lng" name="lng" value="rus">
<input type="Hidden" id="lnk" name="lnk" value="about">
<input type="Hidden" id="lnk2" name="lnk2" value="">
</form>
</body>
</html>

Загнутый уголок реализован при помощи подкладывания фонового рисунка в ячейку таблицы

Информацию по дизайну смотрите на сайте http://htmlbook.ru

LeoMilan

Да это я вижу в фаитбаге, что картинка стоит. Вопрос, как ее сделать такую с уголком ? Ну понятн, что в графическом редакторе. Я пользуюсь Paint.NET. Вот как скажем там делать подобдное?

lukamal

LeoMilan:
Да это я вижу в фаитбаге, что картинка стоит. Вопрос, как ее сделать такую с уголком ? Ну понятн, что в графическом редакторе. Я пользуюсь Paint.NET. Вот как скажем там делать подобдное?

фотошоп

вам в этом поможет смотрите, читайте, повторяйте, делайте своё.

LeoMilan

А конкретно в Paint.NET как реализовать ? Вообще программист, который сайт делает, вы думаете он рисует всё это дело сам или тырит из инета картинки ?

lukamal

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

Wmboard

LeoMilan:
Я пользуюсь Paint.NET. Вот как скажем там делать подобдное?

Как сделать в Paintе, я думаю вам никто не скажет... Рассматривайте фотошоп, как графический редактор.

LeoMilan:
Вообще программист, который сайт делает, вы думаете он рисует всё это дело сам или тырит из инета картинки ?

Кто-то делает все сам с нуля, кто-то берет картинки, но картинки из инета это НЕ значит, что дизайнер делал дизайн не сам, украл его.

Найти картинку это 10% работы. Причем картинки могут быть и из платных фотобанков. Конкретно по загнутому уголку есть уроки опять таки фотошопа, а не пайнта.

В сети даже можно найти заготовки по фотошопу с различными элементами.

LeoMilan:
Подскажите как к примеру делать более менее нормальные логотипы, не имея опыта в дизайнте

Никак... ну или бывает, что нет навыков дизайна, но есть вкус. Гармония. Тогда можно набросать лого на бумаге и скан отправить дизайнеру для воплощения его в графике.

Manjuna

LeoMilan, Здравствуйте!

Не могла пройти мимо такой животрепещущей темы.

Если Вы хотите научиться рисовать уголки и прочую графику, я бы Вам посоветовала изучить саму суть рисования в фотошопе.

Введите в поисковике : "как рисовать в фотошоп", пройдите четыре-пять уроков и Вам станет ясно как все это устроено.

Вкратце я могу сказать, что уголки и подобное делается так - создается слой с маской и внутри этого слоя при помощи кисти и градиентов рисуются тени, блики.

Маска нужна, чтобы были ровные края у изображения, кисть нужна, чтобы добиться реалистичности.

Но чтобы этой реалистичности добиться, лучше разобраться как устроен тот же самый уголок. Если Вы хотите понять веб-дизайн в целом, то я бы посоветовала перерисовать 4-5 сайтов, которые Вам нравятся.

Так Вы интуитивно поймете как они устроены, как задается модульная сетка и т.п. С логотипами уже посложнее, так как их по идее нужно сперва нарисовать в эскизном виде, а потом оцифровывать в векторе.Или сразу в векторе делать эскизы.

Вам нужно будет изучить еще и Adobe Illustrator (ну или Корел), если хотите сразу все чисто делать.) Начальные уроки Вы можете тут посмотреть : http://demiart.ru/

. Все новички начинают с этого форума) Пройдите побольше уроков и вы поймете саму суть. Желаю творческих узбеков и удачи!

LeoMilan

Manjuna:
По умолчанию
LeoMilan, Здравствуйте!
Не могла пройти мимо такой животрепещущей темы.
Если Вы хотите научиться рисовать уголки и прочую графику, я бы Вам посоветовала изучить саму суть рисования в фотошопе.
Введите в поисковике : "как рисовать в фотошоп", пройдите четыре-пять уроков и Вам станет ясно как все это устроено.
Вкратце я могу сказать, что уголки и подобное делается так - создается слой с маской и внутри этого слоя при помощи кисти и градиентов рисуются тени, блики.

Маска нужна, чтобы были ровные края у изображения, кисть нужна, чтобы добиться реалистичности.

Но чтобы этой реалистичности добиться, лучше разобраться как устроен тот же самый уголок.
Если Вы хотите понять веб-дизайн в целом, то я бы посоветовала перерисовать 4-5 сайтов, которые Вам нравятся. Так Вы интуитивно поймете как они устроены, как задается модульная сетка и т.п.
С логотипами уже посложнее, так как их по идее нужно сперва нарисовать в эскизном виде, а потом оцифровывать в векторе.Или сразу в векторе делать эскизы. Вам нужно будет изучить еще и Adobe Illustrator (ну или Корел), если хотите сразу все чисто делать.)

Начальные уроки Вы можете тут посмотреть : http://demiart.ru/

. Все новички начинают с этого форума) Пройдите побольше уроков и вы поймете саму суть.
Желаю творческих узбеков и удачи!

Спасибо за ответ !

Brackets

Нужно сначала получить какие-то знания и навыки, интернет в помощь

Похожие темы	Дата
цитаты на тему дизайн	19.10.2024, 18:10
Совет по простому скрипту классификации	19.10.2024, 18:10
Управление языками Великобритании и США на одном сайте...	19.10.2024, 18:10
Добавление нескольких JS на одну страницу	19.10.2024, 18:10
Нужна помощь с созданием вкладок и дополнительных вкладок	19.10.2024, 18:10
Совет по CMS — WordPress или Joomla	19.10.2024, 18:10
Пользовательская целевая страница/страница сжатия и пользовательское имя поддомена премиум-класса	19.10.2024, 18:10
Изображение изменилось, а затем снова изменилось — проблема с JavaScript?	19.10.2024, 18:10
Нужна помощь с калькулятором объема аквариума	19.10.2024, 18:10
Контент не распознается с помощью настраиваемых полей?	19.10.2024, 18:10

Как новичку создать дизайн сайта?

LeoMilan

lukamal

LeoMilan

lukamal

LeoMilan

lukamal

Wmboard

Manjuna

LeoMilan

Brackets

I AM

Интересно