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? is it hard to do this way. in the past i have for school related projects did such an idea. like would jump into DW. never used photo shop other than image editing. my background is photography. thats why i am asking. i am now finding out that photo shop can be used more than just for images. right now i found out it works with muse as well.
2. can the same be used for a web app mock up as well? like importing a web mock up in photo shop and importing it into DW.
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.
Similar Messages
-
Using photo shop and muse together. mock up to final design
Hi as .you know from me asking a million questions. i just heard that photo shop can be used as a mock up for web design. from this video i saw. i am wondering should this be the work flow that i should be using instead of just jumping into muse like i did before in Dreamweaver.? if thats the case i am willing to change my habit. i keep hearing that all ideas come from a sketch layout. with the new photo shop sketch tool for ipad. i am wondering if thats going to be the core for web site ideas. then finish it in photo shop and finalize it in muse . again design is my weak point thats why i have my degree in commercial graphics/ photography. thats why i enjoy web design. but want to keep it simple. so would you recommend this idea?
Placing a PSD in Adobe Muse - Muse-Themes.com - YouTubeIntegration between Muse and Photoshop is limited to placing PSD files into Muse as images or as rollover buttons at the moment. So if you are looking at a workflow that web designers use with Photoshop > Dreamweaver after slicing, then that is not possible in Muse right now.
Photoshop and Dreamweaver integration on the other hand has been drastically improved with introduction of the Extract service and panel in Dreamweaver. You can read more about that here: Extract a Photoshop design into code in Dreamweaver | Adobe Dreamweaver CC tutorials
Cheers,
Vikas -
I am using Photo Shop for one of my college classes and I do not really understand all the features of it. Any info. would be appreciated.
use the GRADIENTS!!!!!
they are awesomeeeeeeeeeeeeee -
I lost my photoshop elements 7.0 serial number and i had not had it registered so i can't get it back. My old desktop broke and i would like to install photo shop on my new laptop. How can i get it back?
I would first go to your Adobe Account and make sure that all info in it was correct and then match up all S/N's with your records. If you find any problems, then make corrections.
If all matches, but does not work, contact Adobe and see if they still sell replacement DVD's for CS2. Adobe usually does, for a small price. Still, you will need your correct S/N, so you will probably be back on the phone to Adobe. When I once used them for a S/N problem, they were quick and did a perfect job.
Good luck,
Hunt -
Photo shopping images... Can it be done??
Hi
I'm creating a 'target' doc. Basically, as we raise money I want to colour in the image to reflect how much cash we have. I don't have photo shop but surely there's something on Apple that can do it...? Have tried all sorts and am not having any luck! Please bear in mind when answering that I'm a novice!!Hi Trueginger70
Welcome to the forum. You could try Pixelmator which is a handsome program offering much of what Photoshop has at a fraction of the price:
http://www.macupdate.com/info.php/id/25879/pixelmator
You can also do something using a shape as a mask:
+Toolbar > Shapes > Choose+
You can play with the color/stroke/fill/gradient/transparency in:
+Inspector > Graphic > Fill/Stroke/Tint/Shadow/Transparency+
You can also drag an image into the shape and by clicking on the Edit button then drag the image up or down to progressively fill the shape.
By overlaying the image with a transparent gradient you can also slide up or down color to give the appearance of progressively coloring the image.
Another method is to have a white .pdf file with a shape hole in it to cover over another image and do similar tricks to the above.
Let your imagination loose.
Peter -
HELP I just bought a new dell quad core 5i and HAVE DOWNLOADED THE TRIAL VERSION OF PHOTO SHOP - its Slow to open up a small file and equally as slow to print why?
Use Photoshop menu Help>system Info... use its copy button and paste that info in an append here.
Supply pertinent information for quicker answers
The more information you supply about your situation, the better equipped other community members will be to answer. Consider including the following in your question:
Adobe product and version number
Operating system and version number
The full text of any error message(s)
What you were doing when the problem occurred
Screenshots of the problem
Computer hardware, such as CPU; GPU; amount of RAM; etc. -
Trying to download free photo shop ?
Trying
to download free photo shop with no succes any suggestions ???Well, Photoshop isn't "free". All there is is the trial version to evaluate its potential for making a purchase. Since you did not provide any relevant info like system or browser used, we cannot help specifically, but you might wanan have a look at that:
Troubleshoot Adobe Download Assistant
Mylenium -
Hi, having old macbook pro intending to upgrade my os from snow leopard to lion but negative reviews on lion just put me off..i have ms office and photo shop installed on my machine..my question is will upgrading to lion stop me using those application? thank you.
htfromgrantown wrote:
Hi, having old macbook pro intending to upgrade my os from snow leopard to lion but negative reviews on lion just put me off..i have ms office and photo shop installed on my machine..my question is will upgrading to lion stop me using those application? thank you.
Negative reviews are common place here as it is a trouble shooting forum. If you want to read the advantages, improvements and new features then go to the Apple site. If you are running Word 2004, Early Adobe suite, etc which are PPC programs, then don't update. Go to Apple logo in upper left menu bar, open About this mac > More Info > Software >Applications and sort by 'Kind' and look what PPC programs you have installed. If you are not prepared to upgrade these programs, then do not update to Lion.
There are plenty of threads to read up on about this here. But remember that 99.9% of comments will be negative, even though the forums represent only a tiny fraction of the Millions of Lion Downloads purchased and installed with no issues at all. So basically it's your call.
Good Luck -
I have just got a new desk top and I am trying to work out how to get The creative Cloud programs I use (light Room and Photo Shop) off my old Desk top and onto the new desktop. Does any one know how to do this or have already done it, or do you have to cancel the subscription on the old PC and start a new subscription for the new PC.
Hi Jessica,
You do not need to cancel the subscription. You can simply follow the article: Creative Cloud Help | Download, install, update, or uninstall apps which will help you to install the Adobe CC application on your new PC.
If possible you can also deactivate the license from your previous computer using the article: Activation & Deactivation Help.
Let me know if it works or not.
Thanks,
Ratandeep Arora -
I have recently updated the new apps via creative cloud now photoshop and bridge no longer work, they open then say they have encountered a problem and close, I also tried opening the old version of photo shop but getting the same result
What OS version? What's the exact error? Exactly when does the error occur? What previous versions? What is on the screen when the error displays? Does Photoshop get fully open?
Try opening Photoshop holding down Shift key immediately to turn off plug-ins. Lots of good suggestions here: Photoshop: Basic Troubleshooting steps to fix most issues -
I edited photos in photo shop thay I took off my camera and when I was done I saved them in a folder in my documents as a jpeg. now when I try to open them there is an encryption error message
The folks here would need far more information from you before they provide help.
You know the drill: Exact OS...PS version...etc. The more you provide, the better.
What is the exact message that is displayed?
What have you tried so far?
Do the files display on your browser? In Bridge?
What are you doing when it happens?
Are the files still on your cameras card? If so and,you copy one to your desktop and save it without changes, does it reload properly?
Don't worry about providing too much information. Every little bit helps. -
i bought this apple ipad from pawn shop and have receipt. its locked by previous owner and pawn shop had no info on previous owner to contact. how can I delete all content and start fresh so my grandson can use for college?
If it's activation locked, you can't; go back to the shop and ask for a refund.
(120778) -
Computer is balky random freezes across apps. Two hard drive cleans later (their scan reveals no hard drive problems) photo shop won't work at all, magic touch mouse inoperable and their diagnoses is corrupted data? Anybody heard of this?
Well, yes, data does get corrupted sometimes.
The trick is finding what data.
By 'cleaned' are you therefor meaning that the drive has been erased and the system re-installed?
Because that's the quickest way to deal with such a situation.
Back up the system first of course,
Add back 3rd party apps one at a time in case one of them is causing the problem. -
I called the number to register my photo shop but I have answer some questions for a freaking trip that I don't want supposed to be "FREE" and I asked to be redirected but the people wont do it. They hung up on me twice. Can someone PLEASE help me register my Photo shop? It will not stay open if it is not registered.
This whole deal reeks. I do not know where you got your product from, but that's not how Adobe Photoshop works.
Go here first: Contact Customer Care
That is the official contact.
Contact Customer Care by chat or Phone.
If the website you went on is not www.adobe.com, close the browser.
If the number is for a "survey" to "win a trip", hang up. It's a scam to get your credit card in order to "secure" the trip. -
drag and drop to photo shop no longer works after installing Apple "Photos"; It was working fine before the latest Apple update (10.10.3) . what can be done?
Nothing. It's nothing to do with PSE; this is a limitation of Photos, as is the loss of being able to use an external editor without exporting copies of your images.
Maybe you are looking for
-
Can not open Mail App in IOS 8.1.1
Since I installed IOS 8.1.1 versión today I have not been able to open Mail App. When I try to open it the screen turns white for a few seconds and then it crashes. I would like to know if there is any solution to this, as checking my mail is escenti
-
hi all, how can i create a new layout apart from the standard for VF04 ( maintain billing due list ) , reason being the user does not require all the fields which are on display in the std one. Hence forth i want to create a new user specific layout.
-
Can i conect 2 digital screens to one MB Pro? how?
Hello folks I hear that i can connect to 2 monitors somehow with one MacBook Pro, can someone explain how? I allready plan on using the PCMA slot for eSata/FW800 raids. ( if this was the other option) please advise Thanks Larry
-
Thanks in advance for your help everyone. I'm running Tiger on my Macbook Black. Last night I was editing photos in iphoto and I got the spinning wheel. After waiting a few minutes it was still there so I performed a force quit on iphoto, Mail, Safar
-
Is there a way to move my version back to 7.0a1?
I am on the Aurora channel and I use some add-ons that are only supported up to 7.0a1, and I recently updated to 7.0a2 only to find them non-functional. Is there a way to move this back to 7.0a1? And is there any danger in doing this?