Photoshop to design a website

I am new to using the adobe products. Up to this point I have been using wordpress to design and build websites for friends. I am starting to get more friends asking me to build sites for them.
Does Adobe have any free tutorials that I can review that can show me how to layout and design a website using photoshop?
The last website I did was www.thetop40.com and I want to create something like this again.

Hope these help:
http://sixrevisions.com/photoshop/graphics-beginner-tips-web-designers/
http://sixrevisions.com/photoshop/25-web-design-layout-tutorials/
http://sixrevisions.com/web_design/40-useful-photoshop-web-layout-tutorials/
http://help.adobe.com/en_US/photoshop/cs/using/WS18F9E180-3241-4891-ACC8-82C9DFB254F5a.htm l
-janelle
p.s.
Great tutorial step-by-step
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
i personally have created my first website via photoshop, then used dreamweaver in the end. Its just the way that i personally discovered what I had to do for my first website at that time.
goodluck

Similar Messages

Hi I designed my website in Photoshop, sliced , and opened it in dreamweaver. I want a interactive s

Hi I designed my website in Photoshop, sliced , and opened it in dreamweaver. I want a interactive spry bar but when ever I try to insert it, I get gaps in my page.
Below is the complete code: http://www.coriemoment.com
<html>
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="auto" topmargin="auto" marginwidth="auto" marginheight="auto" margin:0;>

<table id="Table_01" width="1281" height="768" border="0" cellpadding="0" cellspacing="0">
          <tr>
                    <td colspan="6">
                              <img src="images/index_01.png" width="1280" height="220" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="220" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="4">
                              <img src="images/index_02.png" alt="" width="414" height="548"></td>
                    <td rowspan="3">
                              <object width="564" height="423"><param name="movie" value="http://www.youtube.com/v/XbuQiJ6Sv_M?hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XbuQiJ6Sv_M?hl=en_US&version=3" type="application/x-shockwave-flash" width="564" height="423" allowscriptaccess="always" allowfullscreen="true"></embed></object></td>
                    <td colspan="3">
                              <img src="images/index_04.png" width="255" height="89" alt=""></td>
                    <td rowspan="4">
                              <img src="images/index_05.png" width="46" height="548" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="89" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="2">
                              <img src="images/video_03-07.png" width="1" height="336" alt=""></td>
                    <td rowspan="3">
                              <img src="images/index_07.png" width="34" height="459" alt=""></td>
                    <td>
                              <script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
/*put your twitter id that people use to reply to you below. Mine is mhorning. If you only want to see the Tweets that you have Tweeted, then delete the part below that says- OR to:coriemoment */
search: 'from:coriemoment OR to:coriemoment',
   /*this is the duration in terms of seconds*/
interval: 30000,
   /*this is the title you want on your tweets*/
title: 'Corie Tweets',
subject: 'Send us your comments',
   /*setting width to 'auto' will adjust the width of your tweetbox to whatever is set on your div. You can change this to something like 500px if you want*/
width: 'auto',
height: 212,
theme: {
    shell: {
             /*this will change the background color of your tweetbox. It is currently yellow*/
            background: 'body p, body img, body embed, body object, body video{opacity:1 !important}',
      /*this will change the color of the text in your background*/
            color: 'fac935'
    tweets: {
             /*this will change the background color behind your tweets. It is currently white*/
            background: 'body p, body img, body embed, body object, body video{opacity:0.2 !important}',
       /*this will change the color of the text in your tweets. It is currently black*/
            color: '#000000',
       /*this will change the color of anything that is hyperlinked in your tweet. It is currently blue*/
            links: '#1985b5'
features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
}).render().start();
</script></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="302" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="2">
                              <img src="images/index_09.png" width="220" height="157" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="34" alt=""></td>
          </tr>
          <tr>
                    <td colspan="2">
                              <img src="images/index_10.png" width="566" height="123" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="123" alt=""></td>
          </tr>
</table>

</body>
</html>

Very bad practice to just use image slices into your website.
Check out this tutorial to learn how to efficiently slice, dice and markup your design into an active HTML format - http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/
Also, Spry - has been deprecated and is no longer officially supported by Adobe. http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
Consider using a jQuery menu.
-Sudarshan

What is the best way to upload icons I created on illustrator, onto a photoshop file of a website design?

I currently in the process of designing a website on Photoshop. I have designed some icons for the website using Illustrator. What is the best way to upload these icons onto the photoshop file and keep them looking crisp and high quality? I have tried a number of ways but all seem to come out pixilated.

What you need to do is make sure you are creating the Illustrator icons at the same ppi as the Photoshop document and at the correct size. If you have created the icons say with 300ppi but are in pixels it won't carry the same properties as the website you are creating if that has been set up as 72ppi and therefore will distort.
Once you have mastered that then you are best (if you think there may be changes to the icons later down the line) to create .ai files of each icon and place them intt the Photoshop document, then if you make any changes to the source .ai file it will update within you website design.
If you don't see the icons changing then you can always just copy and paste directly from Illustrator to Photoshop and make any changes on the fly by making sure you keep it as a smart object.

How can i turn a photoshop file into a website with knowing code? can i upload Muse or DreamWeaver?

How can i turn a photoshop file into a website with knowing code? can i upload Muse or DreamWeaver?
I created a few images (pages for a site) on photoshop and want to turn them into HTML code for a website- Can i Just upload the file into one of these programs and make a file with the correct code imediatly?
I was reading about using EDGE Reform but i did not understand if i can create the code with it, in the end it says it still needs to be sent to website developer after?

You need to look at Dreamweaver as a code editor. You need to learn to create good, clean HTML code with style sheets to make websites with Dreamweaver.
There are tutorials that will take you from a layered .PSD file to HTML. Here's a good one:
http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-d esigns-step-by-step/
Adobe's Muse is a semi-WYSIWYG website layout creator for small websites (1-5 pages). But there is no way you can go from a .PDS file to Muse, you have to start the site in Muse.
I have seen a few Muse sites and they're OK, but there is some code that Muse creates that is kind of odd. If you want a good, clean website that will work for you or your business, Dreamweaver is the best choice. Alternatively, you could hire a pro.
-Mark

Want to add online store into my pre-designed PHP website template

Hi guys,
I have designed my website in PHP and need to add an online store to my site.
In the past I've used the WebAssist PayPal extension but ideally I am after something a bit more versatile and something that displays the user's shopping basket within my website template, instead of opening a new window with the cart contents.
Does anyone know of any shopping carts out there that I can insert into my template? Or, is there a way to manipulate the WebAssist buttons to have the shopping cart display within my website template - without using iFrames or unsatisfactory fixes like that?
Thank you and I hope to hear from you.
SM

Hi John,
Thanks for the reply! Ideally free but if not, I wouldn't really want to spend any more than $100 on it really.
SM

Problem in designing a website?

Although this question does not belong here?, I have the following question!
I am designing a website which I will upload to the Internet on thursday! But I cannot get rid of the transparent (white) outside my sections. I have asked this question several times at a html forum, but the problem still exist!
Does someone know a solution for this problem?
I include the html and css codes:
HTML
<html>
<head>
<title>Eduard Lid</title>
<link rel="stylesheet" type="text/css" href="ex1.css" />
</head>
<body>
Libro
Perfil
<img src="images/me.jpg" alt="me" align="right" width="320" height="240"
</div>
Eduard Lid
<pre>Este sitio web es hecho por Eduard Lid &copy</pre>
</body>
</html>
CSS
div.header
margin:0px;
padding:0px;
background-color:#98fb98;
width:1200px;
height:150px;
div#main
background-color:#f0ffff;
width:1200px;
height:240px;
border:0px solid
div.footer
background-color:#98fb98;
width:1200px;
height:170px;
text-align:center;
p
font:verdana;
font-size:40px;
color:#00008b;
border:0px solid black;
h5
text-align:center;
color:#dc143c;
font:arial;
Thanks!

I was able to fish out your web page text from your first post. Do a reply. Click on the double quote mark to get you nearly original post. Delete the leading > . Hint change "\r> " to "\r".
Here is the revision:
<html>
<head>
<title>Eduard Lid</title>

<style type="text/css">
/* You need to make a default for the whole of the document */
body
background-color:#98fb98;
div.header
margin:0px;
padding:0px;
background-color:#98fb98;
/* I wouldn't force the width. Doesn't come out nice on my 15"
display Try using your web page when viewing with a
smaller panel size. */
width:1200px;
height:150px;
div#main
/* Why the differences in background colors??? The last mention color becomes the effective background color.
background-color:#f0ffff;
background-color:#98fb98;
width:1200px;
height:240px;
border:0px solid
div.footer
background-color:#98fb98;
width:1200px;
height:170px;
text-align:center;
p
font:verdana;
font-size:40px;
color:#00008b;
border:0px solid black;
h5
text-align:center;
color:#dc143c;
font:arial;
</style>
</head>
<body>
<div class="header">
<a href="websites/book/mine.html">Libro</a>
<a href="http://www.viadeo.com/es/profile/eduard.lid">Perfil</a>
</div>
<div id="main">
<img
src="http://spaceplace.jpl.nasa.gov/en/_images/common/nasa_header/logo_nasa.gif"
alt="me" align="right" width="320" height="240" >

</div>
<div class="footer">

<p class="sansserif">Eduard Lid</p>
<h5>
<pre>Este sitio web es hecho por Eduard Lid &copy</pre>
</h5>
</div>
</body>
</html>
Robert

Photoshop CS6 design and web

We bought photoshop (CS6 design and web premium) a year ago. After one year we receive the notice that our trail version has expired and that we need to buy the official version. This is trange since we already bought it a year ago

Did you check the solutions mentioned in this doc?
http://helpx.adobe.com/creative-suite/kb/errors-exit-code-6-exit.html

After i designed a website for desk top how do i save the site for cell phone

after i designed a website for desk top how do i save the site for cell phone use

I don't think you can simply save a desktop design as a cell phone design. While in Muse and in the site plan view for you website you should see three tabs near the top of the page. If you click the "Phone" tab, you will get a pop-up dialog box asking which element you would like to copy over from your desktop site (if any). You must then design the site for cell phone use. You can use the same objects, pictures, etc. from your desktop site and Muse should automatically optimize those elements for phone use. However, Muse does not automatically take a desktop design and create a cell phone design from it.
As I understand it, Muse uses user-agent detection to decide which site it wants to display to the user. You however, need to create the different versions of your site so that Muse can apply a specific design for the intended use.

Strange addys are popping up, replacing long-held bookmarks - like youtube defaulting to "Design a Website - Photo Folio" - help!

Certain regularly visited websites, like youtube.com or my home page, are instantly being defaulted to this website "Design a Website - Photo Folio". I type in youtube, but what pops up is this design site. This morning even my Foxfire home page is instantly defaulting to this website design company's page. I've checked all the Firefox Preference tabs, cleared my cache, cleared by history - same thing. Help!

It could be the work of one of your add-ons, or even add / mal-ware.
Look thru your add-ons list and make sure you know what each one is
there for. Also, check the programs that are on your computer
'''Windows > Start > Control Panel > Uninstall Programs.'''
'''(Mac: Open the "Applications" folder)'''
Go thru the list and use a web search to check any that you don't
know what they are.
'''''[https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-caused-malware Troubleshoot Firefox Issues Caused By Malware]''''' {web link}

I own a Mac OSX version 10.4.11 with Illustrator, Photoshop, & In Design CS. I want to upgrade to a

I own a Mac OSX version 10.4.11 with Illustrator, Photoshop, & In Design CS. I want to upgrade to a mac book pro with the latest version of these programs. Can I do this and how?
Thanks, Joan

I understand that it is difficult to determine which forum to post in since there are so many. This particular forum (sharing and storage) was created to help those transitioning from Photoshop.com to Adobe Revel. I am moving your post to the correct forum so that it can get proper attention.
I'll put this posting in the installation community so the experts there can help you.
We also have many other forums relating to other Adobe products
http://forums.adobe.com/community/
http://forums.adobe.com

META TAGS? How do I change meta tags while designing my website in iweb?

META TAGS? How do I change meta tags while designing my website in iweb?

I've designed a new website using iWeb. (I'm a beginner and have never done this before.) I published it to MobileMe. The site is for a volunteer organization, which requires that all pictures and images have text tags. (For this purpose, I assume that's the same as Meta tags.) A rep at the local Apple store clued me into iWebSEO Tool ("SEO"). I used it successfully got all my pictures and images tagged, altho it was hard and took a few hours. This was two months ago. I checked my site earlier this week and all the tags have disappeared. I went back to SEO and all my original work was still there. So I hit re-apply and then saved and republished my site. Still no tags. I have several questions. Is this a regular problem with SEO? Do I have to do all the tags over again? Is there any easier solution? Is Apple going to improve iWeb so this is not a problem in the future? I'll appreciate any help I can get. Thanks.

New to Flash designing a website

Hello All;
I am very familier with website design however, this is my
first attempt at designing a website completely in flash. I have
learned quite a bit over the last couple of weeks playing with this
project and really like the abilities and functionality of flash.
Here is my major problem which I have tried to resolve several
ways. The issue was how to have multiple pages. At first attempt, I
thought I can make html pages and put a seperate flash movie for
each page (i.e. home, contact us, ect. ect.) The only way that
works is with using frames and it is very unorganized. The second
method I tried was using scenes. Scenes are either too complex for
me or I missed something in the translation from the tutorials, so
I abandoned that method as well. Finally, what I am using now is
Frames. Frames seam to work well but here is my major problem. So I
make a frame called contact and it is the contact page ofcourse.
When I go to that frame it has everything from the Home/index
frame; I then delete the stuff and somehow I was able to do this
with some of the frames but others when I delete the things they
get deleted from all the frames. Anyone have any idea what I am
doing wrong here. I would really like to make this site completely
in flash and not resort to any html if I can help it. Anyways,
please let me know if what I am doing is possible or just a pipe
dream?
Thanks in advance
Tamer

Using frames is a good method for building segments of your
site. When you place something on the stage, it will occupy one or
more frames in the timeline. The first frame will be a keyframe,
that's what that filled black dot in the frame means. If you want
something to occupy say 10 frames in your movie's timeline, then
you can go to the eleventh frame and add an empty keyframe. This
will end section of the timeline that contains that particular
content.
You can also use keyframes to create animation. You can find
you more about that in the online help.
You may also want to consider using movieclips to contain the
material for any given section of your movie. Look at some of the
tutorials that came with Flash. They may help to explain some of
these concepts. Also try out the material at
http://www.gotoandlearn.com.

I designed a website for my client and he had already purchased a hosting package with a company, Mu

I designed a website for my client and he had already purchased a hosting package with a company, Muse is asking for the Business Catalyst in order to use the contact us form. What can I do in order to fix this and avoid having to purchase the Catalyst service. Please advise can the code be alter?

Yesterday Adobe announced updates to all the creative cloud products, including Muse. One of the new features for Muse is Forms that work on most hosting providers(not just BC).
The new version of Muse will be publicly available in June. Prerelease builds are available now for users who have joined the prerelease program (http://www.adobekb.com/participating_in_muse_beta.html)
http://www.adobe.com/products/muse.html
http://adobe.ly/17IojFs
http://youtu.be/RrXHhiY4-a0

Designing a website using iMac

Hi there,
Any recommended software (freeware) for use to design a website for photography business?

Very few people or businesses design and code their own websites from scratch anymore. It is just to labor intensive and requires a breath of knowledge that is hard for one person or even a small group to have, especially if they have an actual business to run.
You have a few choices one is to use a site that is already setup for the business you have. As you are asking about photography you;re in luck there are a lot of sites doing this sort of thing.
The other choice is to setup your own site using a content management system (CMS) which does all the heavy lifting. All you need to do is modify it for the look you want and for the business you intend to carry out.
For the former Zenfolio - Professional photo and video hosting for photographers ... gets good marks from some professionals I know who use it but there are a lot of others out there.
For the later Drupal - Open Source CMS | Drupal.org is one of the most widely used CMS systems by a wide array of end users (you'll be surprised to see just what sites use Drupal ). It has a large active development community and a wide range of modules that can be plugged in to do a wide range of tasks.
The way you go really depends on what you are looking to do and how much effort you want to put into the web side as opposed to the business side.
regards

Dreamweaver 5.5 How to Design a Website

Dreamweaver CS5.5 Tutorial: How to Design a Website with Dreamweaver CS 5.5
http://www.insurancecompaniesworld.com/dreamweaver.html
I can trust on the information on this website about Dreamweaver?
Yes or no?
Thank you.
Do you know any good web site dreamwiever tutorial?

Hello,
for my part I would prefer Adobe's tutorials: http://tv.adobe.com/show/learn-dreamweaver-cs5/ e.g. Further there are a lot of other nice things, like:
http://www.adobe.com/de/devnet/dreamweaver/articles/first_website_pt1.html,
http://www.lynda.com/cs5family/
http://alt-web.com/Free-CSS-Templates.shtml aso.
Good luck!
Hans-Günter

Photoshop to design a website

Similar Messages

Maybe you are looking for