-
1. Re: photo shop mock up info
Hi i was wondering about information on using photo shop to build a mockup for a web site and import that mockup into dreamweaver. can it be done?
Yes, it can be done pretty easily, but bear in mind that this is ONLY suitable for a mockup of the actual site pages. Putting PS-converted HTML on the web is a recipe for disaster. The code that PS (or any graphics application) produces is very "brittle" (meaning it breaks easily when viewed in different browsers each having different display preferences). If you want to put your layout into web-suitable pages, you'll have to build the graphic in PS, export them, and place them on a page's infrastructure that you build in Dreamweaver.
-
2. Re: photo shop mock up info
i understand. the reason i asked is bec i saw a youtube video on photo shop mock up and muse working together. lately i been using muse for layout design. yes i learned html coding before when DW Cs4 came out while i was in school. but for class projects it was easy. but for my own site. there were things i wanted but could not have. in DW cs4 the web gallery was taken out. never could figure how to add one in. i even tried bringing or attaching a Lightroom gallery. and i had to start over and over about a lot of times. i just kept getting stuck, bec i was worrying on layout. in the new DW CC. not much as changed. in my opinon. but i am not giving up on DW. from scratch muse will help out. but for advance use. i see me using DW CC. or even uses DW to edit existing html or wordpress sites from other host. and build web apps. which is why i still use it. for now.
my main goals is to use the two apps together both muse and DW. have to figure that out.
layout has been a big deal for me. thats why muse is easier. and adding gallery on the home page is what i wanted. DW did not have that option from cs4 and on.
again this is coming from a photographer graduate, who only took DW/ web basics class . i am trying to visualLiz from a graphic designer point of view. but till then i am stuck with basics
so much for me to learn
-
3. Re: photo shop mock up info
my main goals is to use the two apps together both muse and DW. have to figure that out.
Give it up. The two don't work together. DW can open Muse-created pages, but they will make your brain explode. Muse has no idea what to do with DW-created pages.
so much for me to learn
Yes, unfortunately. If you want to do what you have described, you have three alternatives - bite the bullet and learn HTML and CSS and how to use them to build contemporary web pages, or hire someone to do this for you, or learn how to use something like Wordpress where the layouts are already specified in themes and you just add your custom graphics and content. Otherwise your pages will always come out looking like they were built by someone who took the easy road.
-
4. Re: photo shop mock up info
You couldn't pay me to use Muse. But I appreciate where you're coming from.
Below is a simple CSS Layout for displaying Photos. This was custom coded in Dreamweaver. The viewer is jQuery Fancybox2. Copy & paste this code into a new, blank document in DW.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--LATEST JQUERY CORE LIBRARY-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--FANCYBOX plugins-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: silver;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
#wrapper {
width: 90%;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
/**left sidebar**/
aside {
float: left;
width: 25%;
border-right: 1px dotted #999;
min-height: 400px;
padding: 2%
}
/**this styles image container**/
#thumbs {
float: left;
width: 75%
}
#thumbs li {
list-style: none;
float: left;
width: 160px;
margin: 10px 1% 0 1%; /**space between containers**/
}
/**recommend using same size images**/
#thumbs img {
width: 160px; /**adjust width to thumbnail**/
height: 120px; /**adjust height to thumbnail**/
opacity: 0.75;
}
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
content: ".";
clear: left;
font-size: 0px;
line-height: 0;
display: block;
visibility: hidden;
}
</style>
</head>
<body>
<div id="wrapper">
<aside> Left Sidebar </aside>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Image Viewer</h1>
<!--insert thumbnails with links to full size images below-->
<ul id="thumbs">
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
</ul>
<!--end thumbs-->
</div>
<!--end wrapper-->
<!--FancyBox function code-->
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
</body>
</html>
Nancy O.
-
-
6. Re: photo shop mock up info
bford225 wrote:
Hi i was wondering about information on using photo shop to build a mockup for a web site and import that mockup into dreamweaver. can it be done?
Hello,
Have you tried Extract in the new DW CC 2014.1 release. It does exactly the same that you are asking for; helps 'comp to code' workflows for PSD mockups.
For detailed info, check this: http://helpx.adobe.com/dreamweaver/using/whats-new.html#Extract in Dreamweaver
You might also like this tutorial: Extract a Photoshop design into code in Dreamweaver | Adobe Dreamweaver CC tutorials
Cheers,
Subhadeep
-
7. Re: photo shop mock up info
no i have not tried it yet. i have heard of it. the only reason i asked about photo shop mock ups, is bec i am trying to make it easier on myself. for one. most of my web site projects, i research on the internet, as in looking for ideas of layouts. 2nd. is then i just jump into DW or Muse CC. by taking either a black template that is provided by either DW or Muse, or start from scratch. the last reason i asked is bec. i have been trying to figure out how to get JPEG versions of websites for a portfoilo examples. so as in turing a web site into a jpeg. like image examples. last is templates. .
the main thing is . that I am a photographer, every application i have used was for photography use. I took 1 class in each of the following, DW, AI ID and PR. those were extra classes i took, and only know the basics. my degree is photography thats what my associates is in
i would like to learn more, but at the present time i don have a job, so can not go back to school. thats why i ask a lot of questions.
thanks. if theres as away that i can learn more from adobe, like an educational resource than that would be great with out asking a million questions. everytime i get stuck.
thanks
-
8. Re: photo shop mock up info
Use Photoshop for images only. Use DW to build your web pages.
A weekend of home study is all you need to grasp the fundamentals of HTML, CSS & web design theory. See links below:
- http://w3schools.com/
- http://www.csstutorial.net/
- http://webdesign.tutsplus.com/sessions/web-design-theory/
Once you know the basics, you're ready to work through this 5-part tutorial
Creating your first web site in DW CC -
https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part1.html
Feel free to post back if you have any questions.
Have fun!
Nancy O.
-
-
10. Re: photo shop mock up info
All of my website designs, since 2004, started out as pixel perfect Photoshop designs. It's my process. Meticulously migrating (reproducing) those designs in HTML & CSS using Dreamweaver takes a considerable amount of time and skill, but that too has been my process. Extract for Dreamweaver and Generate for Edge Reflow are both very useful for speeding up this workflow, but even these require sound knowledge of HTML, CSS, and Responsive Web Design (RWD) techniques.
If they don't kill off Edge Reflow, I'm looking forward to perhaps using it more and more for RWD prototypes. I mocked up an old design with it last month, and was very impressed with the progress they had made. Getting the final project into Dreamweaver took only a couple of clicks. With projects starting out in Reflow, I can see where Photoshop might be used less and less for website mockups, and more for web assets and design elements. Of course, this type of mindset could usher in the demise of Reflow... if it hasn't already. ;-)
A lot of free training can be found using search engines. The two paid resources I've used extensively are Online video tutorials & training | lynda.com, and Train Simple - Adobe Online Training.
-
-
